基于 Firebase 数据的 Nuxt 动态路由 [英] Nuxt dynamic routes based on Firebase data

问题描述

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

I'm having a Nuxt app in SPA mode hosted on Netlify. I'm authenticating and storing users data with Firebase.

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

I want to display all users profile on a dynamic routes. For example

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

(其中martcube"是文档 ID)

(where "martcube" is the documentid)

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

Is this even posible with the given stack of technologies ? If you need extra code or info, write me and i will edit my question right away.

推荐答案

如果我正确理解您的问题，您想:

if I understand your problem correctly, you want to:

1. 为每个 documentid 设置一个动态路由 (.../users/martcube)
2. 解析路由中的 documentid 信息并从 Firebase 数据库中获取数据

1. have a dynamic route for each documentid (.../users/martcube)
2. parse the documentid information from your route and fetch data from your Firebase database

---

1) 动态路由

• 为 users 页面创建 pages 文件夹结构，如下所示:<代码>页面>用户 >_id >index.vue

---

1) dynamic routes

• create the pages folder structure for the users pages like this: pages > users > _id > index.vue

这将允许动态路由:

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

如果你想要一个页面用于 .../users 路由，当没有 documentid 附加到路由时，只需创建一个 index.vue> users 文件夹内.

If you want a page for the .../users route when no documentid is attached to the route simply create an index.vue inside the users folder.

• 在页面内使用 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>

这篇关于基于 Firebase 数据的 Nuxt 动态路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！