firebase - 基于 Firebase 数据的 Nuxt 动态路由

Question

我在 Netlify上托管了一个SPA 模式的Nuxt应用程序。我正在使用Firebase验证和存储用户数据。

我想在动态路线上显示所有用户个人资料。例如

https://www.myapp.com/users/martcube

（其中“martcube”是documentid）

对于给定的技术堆栈，这甚至可能吗？如果您需要额外的代码或信息，请写信给我，我会立即编辑我的问题。

Answer 1

如果我正确理解您的问题，您希望：

1. 每个documentid( .../users/martcube)都有一条动态路线
2. 从您的路线中解析documentid信息并从您的 Firebase 数据库中获取数据

---

1) 动态路由

• 为这样的页面 创建pages文件夹结构：userspages > users > _id > index.vue

这将允许动态路由：

• .../users/test
• .../users/test2

如果您想要一个.../users路由页面，当没有附加到路由时，只需在文件夹内documentid创建一个。index.vueusers

2）从路由中解析信息并获取firebase数据库

• 在您的页面 ( )中使用fetch 方法pages > users > _id > index.vue：

<template></template>

<script>
export default {
  data () {
    return {}
  },
  async fetch ({ store, params }) {
    // get documentid parameter
    var documentid = params.id;
    
    // get data from the firebase database
    await store.dispatch('getFirebaseData', { documentid: documentid})
  }
}
</script>