Nuxt dynamic routes based on Firebase data

问题

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:

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) dynamic routes

• create the pages folder structure for the users 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