Nuxt dynamic routes based on Firebase data

本小妞迷上赌 提交于 2020-07-23 07:46:40

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!