基于Firebase数据的Nuxt动态路由

Question

我在 Netlify 上托管了处于 SPA模式的Nuxt应用。 我正在使用 Firebase 对用户数据进行身份验证和存储。

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

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

（其中“ martcube”是文档ID）

在给定的技术堆栈中这是否可能？ 如果您需要其他代码或信息，请写信给我，我会立即编辑我的问题。

Answer 1

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

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

---

1）动态路线

• 为pages页创建users文件夹结构，如下所示： pages > users > _id > index.vue

这将允许动态路由：

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

如果您想在没有.../users附加到路由的情况下为documentid路由的页面，只需在index.vue文件夹内创建一个users。

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

• 在页面（pages > users > _id > index.vue中使用fetch method：

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