Nuxt this.$route 未定义

问题描述

我有一个名为 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),}

出现同样的错误...

解决方法

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

要解决此问题，请将 firestore 指定为返回预期对象的函数，如 the docs 所示：

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