请使用Vue动态路由知识实现点击用户列表,展示用户详细信息功能。 1) 创建主页面,用来展示用户名称列表。 2) 点击用户名称链接,进入该用户的个人主页,展示“欢迎**,我的主页”(将用户名作为动态参数传递到个人主页)。
时间: 2023-12-10 20:39:56 浏览: 22
首先,我们需要在路由中定义动态路由。
```javascript
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
{
path: '/user/:name',
name: 'User',
component: User,
},
];
```
其中,`:name` 表示动态参数,可以匹配任何字符串。在点击用户名称链接时,我们可以通过 `$router.push()` 方法跳转到对应的用户主页,并将用户名作为动态参数传递过去。
```html
<template>
<div class="user-list">
<ul>
<li v-for="user in userList" :key="user.id">
<router-link :to="{ name: 'User', params: { name: user.name } }">{{ user.name }}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
userList: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' },
],
};
},
};
</script>
```
在用户主页中,我们可以通过 `$route.params` 属性获取动态参数,并将其展示在页面上。
```html
<template>
<div class="user-page">
<h1>欢迎{{ $route.params.name }},我的主页</h1>
</div>
</template>
```