Vue.js: 유형 오류: 정의되지 않은 '$router' 속성을 읽을 수 없습니까?

Vue.js: 유형 오류: 정의되지 않은 '$router' 속성을 읽을 수 없습니까?

Laravel 5.7 및 Vue.js2.함께 일하고 있습니다.JWT Authentication그리고 Vuex가 내 로그를 저장합니다.사용자 정보에 있습니다.로그인 후 홈페이지로 리디렉션하려는 경우$router이 예상치 못한 오류를 제공하고 있습니다.

로그인 기능:

login()
{
        Axios.post('/api/auth/login',{
          email: this.form.email,
          password: this.form.password
        })
        .then(function(response){

          let token = response.data.access_token;
          let username = response.data.user.name;
          let role = response.data.user.role;

          if(Token.isValid(token))
          {
            localStorage.setItem('token', token);
            localStorage.setItem('username', username);
            localStorage.setItem('role', role);

            this.$router.push({path: '/'});
          }

        })
        .catch(function(error){
          console.log(error)
        })
}

앱.js

import Vuex from 'vuex';
import { routes } from './router/routes.js'
Vue.use(VueRouter)
Vue.use(Vuex);

const router = new VueRouter({
    routes,
    mode: 'history'
  })

const app = new Vue({
    el: '#app',
    router,
    components: {
        AppMain
    }
});

당신은 이 코드를 사용합니다.$router.push({path: '/'}); 함수 컨텍스트에 있습니다.당신은 자바스크립트에서 "이것"에 대해 더 자세히 읽을 수 있습니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

오류를 수정하려면 다음 코드를 작성합니다.

login()
{
        let self = this;
        Axios.post('/api/auth/login',{
          email: this.form.email,
          password: this.form.password
        })
        .then(function(response){

          let token = response.data.access_token;
          let username = response.data.user.name;
          let role = response.data.user.role;

          if(Token.isValid(token))
          {
            localStorage.setItem('token', token);
            localStorage.setItem('username', username);
            localStorage.setItem('role', role);

            self.$router.push({path: '/'});
          }

        })
        .catch(function(error){
          console.log(error)
        })
}

저는 문맥상 "이것"을 더 높게 평가했습니다.또는 화살표 기능을 사용할 수 있습니다.

login()
{
        Axios.post('/api/auth/login',{
          email: this.form.email,
          password: this.form.password
        })
        .then((response) => {

          let token = response.data.access_token;
          let username = response.data.user.name;
          let role = response.data.user.role;

          if(Token.isValid(token))
          {
            localStorage.setItem('token', token);
            localStorage.setItem('username', username);
            localStorage.setItem('role', role);

            this.$router.push({path: '/'});
          }

        })
        .catch(function(error){
          console.log(error)
        })
}

화살표 기능에 대한 내용은 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions 에서 확인할 수 있습니다.

언급URL : https://stackoverflow.com/questions/57020098/vue-js-typeerror-cannot-read-property-router-of-undefined