路由传参
路由传参有3种,分别是query,params,动态路由传参。
路由配置
{
path: '/test/:id',
name: 'Test',
component: () => import('@/views/test'),
}
1.动态路由传参
传递的参数会显示到path中,刷新页面时数据不会丢失
传参方式:this. r o u t e r . p u s h ( ‘ / t e s t / router.push(`/test/ router.push(‘/test/{id}`)。
参数接收:this.$route.params.id
2.query方式
会显示在path上,页面刷新数据不丢失
query适配name和path跳转路由
this.$router.push({
name: "Test",
params: {
id:1
},
query:{
queryParams: queryParams
}
})
参数获取:this.$route.query
3.params
不会显示在path上,页面刷新数据会丢失
params只适配name跳转路由,path跳转时params传参不生效
通过this.$route.params接收路由传参