vue中的路由器未定义答案

【问题标题】：router in vue is undefinedvue中的路由器未定义
【发布时间】：2020-05-26 10:39:38
【问题描述】：

我在我的 App.vue 中添加了一个 axios 拦截器来捕获所有状态 401，所以我可以注销用户。我正在尝试重定向到登录页面。我不断收到“无法读取未定义的属性 '$router'”，不确定问题出在哪里。有什么帮助吗？还有一种更好的方法来全局处理 axios http 状态错误。而不是检查每个发出 http 请求的组件的状态是否为 400,401 等。

created: function () {
  axios.interceptors.response.use(undefined, function (err) {
    return new Promise(function (resolve, reject) {

      if (err.response.status=== 401 ) {

        this.$router.push({ name: 'loginview' })

    }
      throw err;
   });
  });
}

【问题讨论】：

标签： javascript vue.js axios vue-router

【解决方案1】：

主要问题是this 不会引用内部函数内部的组件实例。有多种方法可以解决此问题，例如使用箭头函数。

在下面的示例中，我还删除了 new Promise，因为这似乎没有必要。

created: function () {
  // Using an arrow function preserves the 'this' value
  axios.interceptors.response.use(undefined, err => {
    if (err.response.status === 401 ) {
      this.$router.push({ name: 'loginview' })
    }

    // You may not want to return this in the 401 case
    return Promise.reject(err)
  });
}

【讨论】：

【解决方案2】：

你可以这样做：

created: function () {
  var router=this.$router;
  axios.interceptors.response.use(undefined, function (err) {
    return new Promise(function (resolve, reject) {

      if (err.response.status=== 401 ) {

        router.push({ name: 'loginview' })

    }
      throw err;
   });
  });
}

【讨论】：