路由传参的方式
传参方式可划分为
传参和 params
传参，而 query
传参又可分为在url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。 params
传参又分为声明式和编程式
// 子路由配置 {
path: '/child/:id' ,
component:Child
} // 父组件 <router-link :to="/child/123">导航进入子路由</router-link>
编程式this.$router.push
// 子路由配置 {
path: '/child/:id' ,
component:Child
} // 父路由传参（一般通过事件触发） this .$router.push({
path:` /child/ ${id}`
})
// 子路由配置 {
path: '/child/:id' ,
name: 'Child' ,
component:Child
} // 父组件 <router-link :to="{name:'Child',params:{id:123}}">导航进入子路由</router-link>
编程式this.$router.push
// 子路由配置 {
path: '/child/:id' ,
name: 'Child' ,
component:Child
} // 父路由传参（一般通过事件触发） this .$router.push({
name: 'Child' ,
params:{
id: 123 }
})
// 子路由配置 {
path: '/child/:id' ,
name: 'Child' ,
component:Child
} // 父组件 <router-link :to="{name:'Child',query:{id:123}}">导航进入子路由</router-link>
编程式this.$router.push
// 子路由配置 {
path: '/child/:id' ,
name: 'Child' ,
component:Child
} // 父路由传参（一般通过事件触发） this .$router.push({
name: 'Child' ,
query:{
id: 123 }
}) // id拼接 this .$router.push(路径+？id)
得到路由参数
用params通过 this.$route.params
用query通过
获得 this.$route.query
总结：url不显示传参虽然得到了安全性的提升，但也存在缺陷 刷新页面的时候，传递的值会丢失。普遍还是用id拼接的方法，得到路径传过来的参数也不会丢失。
params动态路由传参 // 子路由配置 path:'/child/:id' // 传参 this .$router.push({path:`/child/ ${id}`})
query id拼接传参 // 子路由配置 path:'/child' // 传参 this .$router.push(`/detail?id=${id}`)