传参方式可划分为 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}`)
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。