vue路由传参
Posted pyx-blog
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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)
以上是关于vue路由传参的主要内容,如果未能解决你的问题,请参考以下文章