问题描述
我在 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:
- 为每个
documentid
设置一个动态路由 (.../users/martcube
) - 解析路由中的
documentid
信息并从 Firebase 数据库中获取数据
- have a dynamic route for each
documentid
(.../users/martcube
) - parse the
documentid
information from your route and fetch data from your Firebase database
1) 动态路由
- 为
users
页面创建pages
文件夹结构,如下所示:页面>用户 >_id >index.vue - create the
pages
folder structure for theusers
pages like this:pages > users > _id > index.vue
.../users/test
.../users/test2
- 在页面内使用 fetch 方法(
pages > users >; _id > index.vue
):
1) dynamic routes
这将允许动态路由:
如果你想要一个页面用于 .../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.
<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 动态路由的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!