无法在 docRef 函数中使用 this.$router.push(' ')

Posted 2023-02-22

【中文标题】无法在 docRef 函数中使用 this.$router.push(\' \')

【英文标题】：Unable to use this.$router.push(' ') inside docRef function无法在 docRef 函数中使用 this.$router.push(' ')

【发布时间】：2019-10-30 02:50:56

【问题描述】：

我正在尝试在我的 quasar 项目中使用 vue-router。 this.$router.push( ' ' ) 可以在页面上的任何地方使用，除了这个 docRef 块内。

我发现this.$router.push 仍然在同一个组件中工作。

此路由器调用有效：

const userRef = this.$db.collection('users').doc(this.$fb.auth().currentUser.uid)
console.log('your id is' + this.$fb.auth().currentUser.uid)
userRef.set(
  accountUID: this.$fb.auth().currentUser.uid,
  accountChosen: true,
  accountType: 'user'
)
this.$router.push('../user/home')

这不起作用（在同一个组件中）：

  var docRef = this.$db.collection('users').doc(uid)
  docRef.get().then(function (doc) 
    data = doc.data().accountType
    if (data === 'user') 
      console.log('account is users')
      console.log(data)
      this.$router.push('./user/home')
     else if (data === 'truck') 
      console.log('account is a truck')
      this.$router.push('./truck/home')
     else 
      console.log('in else statement')
    
  ).catch(function (error) 
    console.log(error)
  )

Chrome 控制台错误

TypeError: Cannot read property '$router' of undefined
        at eval (Check.vue?a4ce:44)

【参考方案1】：

代替：

docRef.get().then(function (doc) 

用途：

docRef.get().then((doc) => 

说明

箭头函数体块内的this 指的是当前上下文，在您的情况下，是 Vue/组件实例。

但是，当您使用 function 而不是箭头函数时， 块会创建一个新上下文，从而更改 this 的语义，使其指向该函数之外的 this 以外的其他内容。

换句话说，您的问题发生是因为每个function () 都有自己的上下文（它自己的this），可以将其设置为其他内容。箭头函数 OTOH 继承了声明它的上下文（this）。在这种情况下，由于您在方法中声明它，所以 this 是 Vue 实例。使用箭头函数可以保留它。使用function() 并不能保证它（this 可以设置为其他值，通常是这种情况）。

更多详情，我推荐MDN - Arrow Functions。