vue路由传参

路由传参

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

你可能感兴趣的:(vue,工作+面试,vue.js,前端,javascript)