Nuxt this.$route 未定义

Posted 2023-02-22

【中文标题】Nuxt this.$route 未定义

【英文标题】：Nuxt this.$route is undefined

【发布时间】：2021-06-08 23:36:38

【问题描述】：

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

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

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

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

但现在我收到一条错误消息，提示“TypeError: Cannot read property '$route' of undefined”。这很奇怪，因为如果我将路由记录到控制台，我实际上可以看到 id。此外，调用 ".doc("DOCUMENT_ID") 效果很好。

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

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

出现同样的错误...

【参考方案1】：

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),