I have stored a group of users in Firebase Firestore.
https://i.sstatic.net/s3quJ.png
Next, I built a Vue component that displays an image with a router-link to the user profile. When clicking on the picture, it should navigate to the user's profile page.
<router-link v-bind:to="{ name: 'view-post', params:{ userId:post.userId}}">
<v-img :src="post.image" alt="pic"></v-img>
</router-link>
My Vue component code above is quite plain at the moment. It includes a template layout for content display.
<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>
The computed property ...mapState within the component stores information such as posts, users, and current user fetched from Firestore.
As for 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