Question

我正在尝试在类星体项目中使用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)

Answer 1

代替：

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

使用：

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

说明

箭头功能主体块中的this指代当前上下文，在您的情况下，指Vue /组件实例。

但是，当您使用function而不是箭头函数时，{}块会创建一个新的上下文，从而更改this的语义，使其指向除{{ 1}}在该功能之外。

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

有关更多详细信息，我建议使用MDN - Arrow Functions。

无法在docRef函数中使用this。$ router.push（''）

1 个答案:

说明