Vue-router 推送未定义答案

【问题标题】：Vue-router push undefinedVue-router 推送未定义
【发布时间】：2020-07-22 09:25:15
【问题描述】：

我使用 Quasar 框架来设计我的 UI。当我使用函数注销并使用vue-router 推送到另一条路由时，出现以下错误：

TypeError: Cannot read property 'push' of undefined

我使用vuex的action方法注销替换：

export const handleAuthStateChanged = ({ commit }, payload) => {
  firebaseAuth.onAuthStateChanged(function(user) {
    if (user) {
      // user is logged in
      let userId = firebaseAuth.currentUser.uid;
      firebaseDB.ref("users/" + userId).once("value", function(snapshot) {
        let userDetails = snapshot.val();
        commit("USER_DETAILS", {
          name: userDetails.name,
          email: userDetails.email,
          online: userDetails.online,
          type: userDetails.type,
          userId: userId
        });
      });
      this.$router.push('');
    } else {
      // user is logged out
      commit("USER_DETAILS", {});
      this.$router.replace('chat');
    }
  });
};

我该如何解决这个问题？

【问题讨论】：

错误提示 this.$router 未定义。你将不得不弄清楚为什么它从来没有达到你期望的价值。
@Doug Stevenson 我该怎么做。你能建议一些方法吗

标签： javascript firebase vue.js vuex quasar

【解决方案1】：

有两个问题：

@MisterCurtis 的回答已经涵盖了this 上下文问题

普通函数有自己的this 上下文，而 es6 箭头函数继承它。一些reading 对此。
this.$router 仅在 this 是组件实例时才有意义。 Vue 将你的 router 插入到它的实例原型中。但是这段代码是一个 Vuex 动作，而不是一个实例方法。

要在外部模块（如 Vuex 或任何其他模块）中使用 vue-router，您可以导入它：

import router from '@/router'

然后使用

router.push

而不是this.$router.push

另一种方法是在登录组件中管理身份验证结果并在那里使用this.$router。

【讨论】：

我使用了这种方法。但这不是推动我的路线。
这是我在 github 上的代码。 github.com/kmihiranga/quasar_app

【解决方案2】：

任何新函数都会定义自己的this 值。在你的回调中 this 不再指向原始的 Vue 实例“this”。

尝试改变：

firebaseAuth.onAuthStateChanged(function(user) { ...

到一个箭头函数：

firebaseAuth.onAuthStateChanged((user) => { ...

this 将正确引用定义 $router 的原始 Vue 实例。

【讨论】：

我像这样重新制作它，但随后显示“无法读取未定义的属性 '$router'”这个错误
我现在意识到你不在 Vue 的上下文中，因为该方法是一个 Vuex 动作。 @Dan 的答案是正确的，您要么必须导入 Vue 实例，要么必须导入 Router 实例。请注意在导入主要 Vue 或路由器实例时可能会产生循环依赖。

【解决方案3】：

感谢大家尝试解决我的问题。我在 vuex 操作中不使用箭头函数来修复它。

export const handleAuthStateChanged = function ({ commit }, payload) {
...

【讨论】：