Vue动态路由-显示来自其他组件的用户详细信息

Question

我在UserList里面有一个用户列表。vue组件。我想在SigleUser中显示每个用户的详细信息。组件(子页面)。我怎样才能用简单的方法做呢?

用户详细信息包含在UserList中。vue组件。当我点击一个特定用户的链接时，我想去他的个人资料

路由器路径:/user/1、/user/2、/user/3等

UserList.vue:

<template>
<v-list two-line>
<template v-for="(user) in users">
<v-list-item
:key="user.username"
>
<router-link
:to="`user/${user.id}`"
>
<v-list-item-avatar>
<v-img :src="user.avatar"></v-img>
</v-list-item-avatar>
</router-link>
<v-list-item-content>
<router-link
:to="`user/${user.id}`"
>
<span class="name">
{{ user.name }}
</span>
<span class="username">
{{ user.usernaname }}
</span>
</router-link>
</v-list-item-content>
</v-list-item>
</template>
</v-list>
</template>
<script>
export default {
data: () => ({
users: [
{
id: 1,
username: 'johndoe',
name: 'John Doe',
avatar: require('@/assets/images/john-doe.png'),
},
{
id: 2,
username: 'bobdoe',
name: 'Bob Doe',
avatar: require('@/assets/images/bob-doe.png'),
},
{
id: 3,
username: 'annedoe',
name: 'Anne Doe',
avatar: require('@/assets/images/anne-doe.png'),
},
],
}),
}
</script>

SingleUser。vue(单用户配置文件):

<template>
<h1>{{ user.name }}</h1>
<h2>{{ user.username }}</h2>
<v-img :src="user.avatar"></v-img>
</template>
<script>
</script>

router.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/users',
name: 'Users',
component: () => import('../views/UserList.vue')
},
{
path: '/user/:id',
name: 'User',
component: () => import('../views/SingleUser.vue')
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router

Answer 1

我在我的Vue 2 CLI沙箱应用程序中创建了一个示例应用程序。通常我会从API中检索用户和用户详细信息，但在我的示例应用程序中，我使用Vuex来存储和检索用户。我还使用了标准的<ul>而不是<v-list>，因为我没有使用Vuetify(另一天)，并且省略了图像。但是路由实现应该在你的应用程序中工作。

UserList.vue

<template>
<div class="user-list">
<h3>User List</h3>
<div class="row">
<div class="col-md-6">
<ul>
<li v-for="user in users" :key="user.id">
<router-link :to="{ name: 'User', params: { id: user.id }}">{{ user.name }}</router-link>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'UserList',
data() {
return {
users: [
{
id: 1,
username: 'johndoe',
name: 'John Doe',
},
{
id: 2,
username: 'bobdoe',
name: 'Bob Doe',
},
{
id: 3,
username: 'annedoe',
name: 'Anne Doe',
},
]
}
},
created() {
this.$store.commit('initUsers', this.users);
}
}
</script>

SingleUser.vue

<template>
<div class="single-user">
<h3>Single User</h3>
<div class="row">
<div class="col-md-6">
<h4>{{ user.name }}</h4>
<h4>{{ user.username }}</h4>
<router-link :to="{ name: 'Users' }">Back</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'SingleUser',
props: {
id: {
type: Number,
required: true
}
},
computed: {
user() {
return this.$store.getters.getUser(this.id);
}
}
}
</script>

/路由器/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import UserList from '@/components/stackoverflow/router-link/UserList'
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/users'
},
{
path: '/users',
name: 'Users',
component: UserList
},
{
path: '/user/:id',
name: 'User',
component: () => import('@/components/stackoverflow/router-link/SingleUser'),
props: true
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router

/存储/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
users: []
},
getters: {
getUser: (state) => (id) => {
return state.users.find( user => user.id === id);
}
},
mutations: {
initUsers(state, newUsers) {
state.users = newUsers;
}
}
})