Nuxt this.$route 未定义

Question

我有一个名为 products/_id 的动态路由，它应该从 Firestore 加载产品。我正在使用 VueFire 从 Firebase 数据库中获取产品。获取整个产品集合工作得很好。

firestore: {
    product: firebase
      .firestore()
      .collection("products")
}

但是获取具有特定 id 的文档是麻烦的开始。通常我会打电话给

firestore: {
    product: firebase
      .firestore()
      .collection("products")
      .doc(this.$route.params.id),
  }

但现在我收到一条错误消息“TypeError：无法读取未定义的属性 '$route'”。这很奇怪，因为如果我将路由记录到控制台，我实际上可以看到 ID。此外，调用 ".doc("DOCUMENT_ID") 工作得很好。

有人知道如何解决这个问题吗？我尝试了多种方法和安装挂钩的组合来检索 id，但无济于事。

  mounted() {
    this.getProduct();
  },
  methods: {
    getProductId() {
      return this.$route.params.id;
    },
  },
  firestore: {
    products: firebase.firestore().collection("products").doc(this.getProductId),
  }

出现同样的错误...

Answer 1

firestore 在这里被指定为一个对象，所以它在组件的上下文之外立即被评估，所以 this 不会是 Vue 组件实例。

要解决此问题，请将 firestore 指定为 returns 预期对象的函数，如 the docs:

所示

export default {
  firestore() {
    // ✅ `this` is Vue component instance inside function
    return {
      products: firebase.firestore().collection("products").doc(this.getProductId),
    }
  }
}

Nuxt this.$route 未定义

Nuxt this.$route is undefined

firebase

vue.js

vuefire

nuxt.js

vuexfire