时间戳

首页 > 解决方案 > 如何将每个用户路由/链接到他们自己的数据？

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

问题描述

我已经存储在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

路由器.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

标签： javascriptfirebasevue.jsgoogle-cloud-firestore

解决方案

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

1/ 在你的 view-post 组件中（你可以通过/post/:userId）获取userIdwith的值this.$route.params.userId。

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

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

您将在 Vue 路由器文档中找到详细解释此机制的页面，通过在导航后获取数据或在导航之前获取数据：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;
       });

    }
  }
}

推荐阅读