作者：hobeson_861 | 来源：互联网 | 2023-09-03 20:10
本文由编程笔记#小编为大家整理，主要介绍了vue路由传参相关的知识，希望对你有一定的参考价值。 1、用name和params传参（参数不会带在地址中，页面刷新参
本文由编程笔记#小编为大家整理，主要介绍了vue路由传参相关的知识，希望对你有一定的参考价值。
1、用name和params传参（参数不会带在地址中，页面刷新参数会丢失）
对应路由配置
{
path: ‘/detail‘,
name: ‘detail‘,
component: detail
}
跳转时传参
this.$router.push({
name: ‘detail‘,// 页面名称
params: {// 要传递的参数
name: ‘张三‘,
}
})
页面中获取参数：
console.log( this.$route.params.name)
2、用path和query传参（参数会带在url地址中）
对应路由配置：
{
path: ‘/detail‘,
name: ‘detail‘,
component: detail
}
跳转时传参：
this.$router.push({
path: ‘/detail‘,
query: {
name: ‘张三‘
}
})
页面中获取参数：
console.log(this.$route.query.name)
3、在配置时携带参数（带在url地址中，页面刷新不会丢失）
路由配置
{
path: ‘/detail/:name‘,
component: ‘detail‘
}
跳转传参
jump(name) {
this.$router.push({
path: ‘/detail/${name}‘
})
}
页面中获取参数
console.log( this.$route.params.name)
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 
![[Vue.js 3.0] Guide – Scaling Up – State Management](https://img.php1.cn/3cd4a/1eebe/cd5/e3aa5425383ba10d.png)