基于 Firebase 数据的 Nuxt 动态路由

Question

我在 SPA 模式 上有一个托管在 Netlify 上的 Nuxt 应用程序。我正在使用 Firebase.

验证和存储用户数据

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

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

（其中“martcube”是文档 ID）

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

Answer 1

如果我正确理解你的问题，你想：

每个 documentid (.../users/martcube)
从您的路线解析 documentid 信息并从您的 Firebase 数据库中获取数据

1) 动态路由

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

这将允许动态路由：

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

如果您想要 .../users 路线的页面，但没有 documentid 附加到路线，只需在 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>

基于 Firebase 数据的 Nuxt 动态路由

Nuxt dynamic routes based on Firebase data

firebase

dynamic-routing

nuxt.js

1) 动态路由

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