配置路由
{
path: 'message',
name: 'message',
component: () => import('../views/MessageView.vue'),
children: [
{
path: 'detail/:id/:content',
name: 'detail',
component: () => import('../views/DetailView.vue'),
}
]
},
传递参数
<router-link :to="{
name: 'detail',
params: {
id: message.id,
content: message.content
}
}
">
{{ message.content }}
</router-link>
注意,这里不能用path了,必须用name
使用
<ul class="">
<li>
编号:{{ $route.params.id }}
<hr />
</li>
<li>
内容:{{ $route.params.content }}
</li>
</ul>