1.动态路由定义
在路由表中按如下格式编写:
{
path: '/user/:id', // 动态路径参数 :id
name: 'user',
component: User
}
在这个例子中,:id
是一个动态路径参数,它表示URL中/user/
之后的部分应该被捕获为一个名为id
的参数。
2.参数传递
可以使用编程式导航:
this.$router.push({ name: 'user', params: { id: 123 } });
在这个例子中,我们使用了命名路由'user'
,并通过params
对象传递了一个id
参数。
也可以声明式导航:
<router-link :to="{ name: 'user', params: { id: 123 } }">User</router-link>
或者
<router-link :to="`/user/${userId}`">User</router-link>
3.参数接收
在目标组件中,你可以通过this.$route.params
对象来访问传递的路由参数。例如,在上面的User
组件中,可以这样获取id
参数:
export default {
mounted() {
const userId = this.$route.params.id; // 获取传递的id参数
// 使用userId进行其他操作...
}
}