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的帖子，用户和currentUser

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到达）中，用userId来获取this.$route.params.userId的值。

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

3 /在DOM中显示数据。

您将在Vue路由器文档中找到一个页面，该页面通过在导航后获取数据或在导航之前获取数据来详细解释此机制：https://router.vuejs.org/guide/advanced/data-fetching.html

如果我们改编“导航后获取”示例，则会获得以下代码来显示，例如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;
       });

    }
  }
}

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

1 个答案: