如何将每个用户路由/链接到他们自己的数据？

Question

我在Firebase Firestore中存储了一堆用户。

然后我创建了一个Vue 组件，其中的图片带有router-link 到用户个人资料，如果我单击该图片，我想从发布该图片的用户转到用户个人资料网站。

<router-link v-bind:to="{ name: 'view-post', params:{ userId:post.userId}}">
  <v-img :src="post.image" alt="pic"></v-img>
</router-link>

这是我现在的代码，是的，我知道它是一个Vue 组件

   <template>
     <v-layout row wrap>
      <v-content>


      </v-content>
     </v-layout>
   </template>

  <script>
   import { mapState } from 'vuex'
   const fb = require('../firebaseConfig.js')

   export default {
    name: 'view-employee',
    data: () => ({

    }),
    computed: {
     ...mapState(['userProfile', 'currentUser', 'posts'])
    },
    methods: {

    }
  }
 </script>

在计算属性...mapState 中存储来自firestore 的帖子、用户和当前用户

Router.js

import Vue from 'vue'
import Router from 'vue-router'
import firebase from 'firebase'
import World from './views/World.vue'
import Login from '@/components/Login'
import ViewEmployee from '@/components/ViewEmployee'

 Vue.use(Router)

   const router = new Router({
     mode: 'history',
     routes: [
      {
        path: '/login',
        name: 'login',
        component: Login,
        meta: {
          requiresAuth: false
        }
      },
      {
       path: '/world',
       name: 'world',
       component: World,
       meta: {
        requiresAuth: true
       }
      },
      {
       path: '/post/:userId',
       name: 'view-post',
       props: true,
       component: ViewEmployee,
       meta: {
        requiresAuth: true
       }
     }
   ]
 })


  export default router

Answer 1

根据您的 Vue 路由器的代码，您可以执行以下操作：

1/ 在您的 view-post 组件中（您可以通过 /post/:userId 访问）使用 this.$route.params.userId 获取 userId 的值。

2/ 在 created 生命周期挂钩中，根据 userId 的值从 Firestore 中获取数据。

3/ 在你的 DOM 中显示数据。

您将在 Vue 路由器文档中找到详细解释此机制的页面，方法是在 Navigation 之后获取数据或在 Navigation 之前获取数据：https://router.vuejs.org/guide/advanced/data-fetching.html

如果我们调整 Fetching After Navigation 示例，我们会得到以下用于显示的代码，例如 userName：

<template>
  <div>
    <div class="loading" v-if="loading">
      Loading...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <div v-if="userName" class="content">
      <h2>{{ userName }}</h2>
    </div>
  </div>
</template>

---

export default {
  data () {
    return {
      loading: false,
      userName: null,
      error: null
    }
  },
  created () {
    // fetch the data when the view is created and the data is
    // already being observed
    this.fetchData();
  },
  watch: {
    // call again the method if the route changes
    '$route': 'fetchData';
  },
  methods: {
    fetchData () {
      var vm = this;
      vm.error = vm.post = null;
      vm .loading = true;

      //We make the assumption that there is a Collection userProfiles
      //with documents with ids equal to the userIds
      fb.collection("userProfiles").doc(this.$route.params.userId).get()
      .then(function(doc) {
         if (doc.exists) {
           vm.loading = false;
           vm.userName = doc.data().userName;
         } else {
           vm.error = "No such document!";
         }
       })
       .catch(function(error) {
           vm.error = "Error getting document:" + error;
       });

    }
  }
}