路由传参的方式

发布时间：2022-08-10 文章分类：编程知识 投稿人：李佳 字号： 默认 | 大 | 超大 打印

传参方式可划分为 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}`)
标签 , , ,