vue路由传参的三种方式

主要分params传参和query传参

方法一：params传参（显示参数）

1、声明式：router-link

//子路由配置{ path：/child/:id, component:Child}//父路由组件<router–link :to=/child/123></router–link>

2、编程式 this.$router.push

//子路由配置{ path：/child/:id, component:Child}//父路由编程式传参this.$router.push({ path:/child/${id},})

子路由可以通过下面代码获取传递过来的参数

this.$route.pa搭建项目系统点我wcqh.cnrams.id 方法二：params传参（不显示参数）

1、声明式：router-link

<router-link :to=“{name:Child,params:{id:123}}”>进入Child路由</router>

2、编程式：this.$router.push

//子路由配置{ path:/child, name:Child, component:Child}//父路由编程式传参this.$router.push({ name:Child,params:{ id:123}})

子路由可以通过下面代码获取传递过来的参数

this.$route.params.id

注意：上述这种利用 params 不显示 url搭建项目系统点我wcqh.cn 传参的方式会导致在刷新页面的时候，传递的值会丢失

(vue官方在2022-08-22做了修改，使用params传参是如果，路径上没有:xx参数，params将会失效。解决办法也很简单：)

方法三：quaery传参（显示参数）

1、声明式：router-link

<router-link :to=“{name:Child,query:123}}”>进入Child路由</router>

2、编程式：this.$router.push

//子路由配置{ path:/child, name:Child, component:Child}//父路由编程式传参this.$router.push({ name:Child,qu搭建项目系统点我wcqh.cnery:{ id:123}})

子路由可以通过下面代码获取传递过来的参数

this.$route.query.id