基于 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) 动态路由

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

这将允许动态路由：

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

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

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

• 在您的页面中使用fetch method (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>