vue路由传参

路由传参

路由传参有3种，分别是query，params，动态路由传参。

路由配置
{
 	path: '/test/:id',
 	name: 'Test',
 	component: () => import('@/views/test'),
}

1.动态路由传参

传递的参数会显示到path中，刷新页面时数据不会丢失

传参方式：this.$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接收路由传参