- A+
所属分类：Web前端
传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。
传参又分为声明式和编程式
方式一params（url显示参数）
声明式router-link
// 子路由配置 { 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}` })
方式二params(url不显示参数)
这种利用 params 不显示 url 传参的方式会导致在刷新页面的时候，传递的值会丢失
声明式router-link
// 子路由配置 { 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 } })
方式三query（url显示参数）
声明式router-link
// 子路由配置 { 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}`)
