vue路由跳转传参数

使用场景:跳转的页面需要根据参数获取页面的数据

路由配置

{
path: '/detail-info',
name: 'detailInfo',
component: () => import('@/views/detailInfo'),
},

方法一

name + params 传参数

toInfoPage(){
this.$router.push({
name: 'detailInfo',
params: {
name: this.name
}
})
},

使用

this.$route.params.name

方法二

path + query 传参数

toInfoPage(){
this.$router.push({
path: '/detail-info',
query: {
name: this.name
}
})
},

使用

this.$route.query.name

区别: 使用query传的参数出现在路由中，界面刷新后传参仍然存在。

易错点: 跳转时用

$router

r

$route