路由传参params（路由传参的方式）
导读：传参方式可划分为 params...
传参方式可划分为 params 传参和 query 传参 ，而 params 传参又可分为在url 中显示参数和不显示参数两种方式 ，这就是vue路由传参的三种方式 。
传参又分为声明式和编程式
方式一params（url显示参数）
声明式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}`)
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！