Vue.js：类型错误：无法读取未定义的属性"$router"？

Question

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
    }
});

Answer 1

您可以使用以下代码：this.$router.push({path： '/'}(; 在函数上下文中。您可以在JavaScript中阅读有关"this"的更多信息 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