问题
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
(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.
回答1:
if I understand your problem correctly, you want to:
- have a dynamic route for each
documentid
(.../users/martcube
) - parse the
documentid
information from your route and fetch data from your Firebase database
1) dynamic routes
- create the
pages
folder structure for theusers
pages like this:pages > users > _id > index.vue
This will allow for dynamic routes:
.../users/test
.../users/test2
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.
2) parse the information from the route and fetch the firebase database
- use the fetch method inside your page (
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>
来源:https://stackoverflow.com/questions/62793132/nuxt-dynamic-routes-based-on-firebase-data