Vue.js：TypeError：无法读取未定义的属性“$router”？

Posted 2023-02-23

【中文标题】Vue.js：TypeError：无法读取未定义的属性“$router”？

【英文标题】：Vue.js: TypeError: Cannot read property '$router' of undefined?

【发布时间】：2019-11-22 23:55:08

【问题描述】：

Laravel 5.7 和 Vue.js2。我正在使用 JWT Authentication 和 Vuex 来存储我的 LoggedIn 用户信息。当我想在登录后重定向到主页时，$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)
        )

App.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
    
);

【参考方案1】：

你使用这个代码：this.$router.push(path: '/');在函数上下文中。你可以在https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Operators/thishttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this@

中阅读更多关于“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)
        )

我在上下文中将“this”放在了更高的位置。 或者你可以使用箭头功能：

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

【讨论】：

值得注意的是，如果您不想使用箭头函数或出于任何其他原因，您始终可以将this 分配给正确范围内的另一个变量，例如const self = this，然后再分配使用self.$router