校园旅游网站建设方案策划书/小红书如何引流推广

路由传参

路由传参有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接收路由传参