vue路由传参的三种方式

主要分params传参和query传参

方法一：params传参（显示参数）

1、声明式：router-link

//子路由配置
{
    path：'/child/:id',
    component: Child
}
//父路由组件
<router-link :to='/child/123'></router-link>

2、编程式 this.$router.push

//子路由配置
{
    path：'/child/:id',
    component: Child
}
//父路由编程式传参
this.$router.push({
    path:'/child/${id},
})

子路由可以通过下面代码获取传递过来的参数

this.$route.params.id

方法二：params传参（不显示参数）

1、声明式：router-link

<router-link :to="{name:'Child',params:{id:123}}">进入Child路由</router>

2、编程式：this.$router.push

//子路由配置
{
    path:'/child',
    name:'Child',
    component:Child
}
//父路由编程式传参
this.$router.push({
    name:'Child',
    params:{
        id:123
    }
})

子路由可以通过下面代码获取传递过来的参数

this.$route.params.id

注意：上述这种利用 params 不显示 url 传参的方式会导致在刷新页面的时候，传递的值会丢失
(vue官方在2022-08-22做了修改，使用params传参是如果，路径上没有:xx参数，params将会失效。解决办法也很简单：)

方法三：quaery传参（显示参数）

1、声明式：router-link

<router-link :to="{name:'Child',query:123}}">进入Child路由</router>

2、编程式：this.$router.push

//子路由配置
{
    path:'/child',
    name:'Child',
    component:Child
}
//父路由编程式传参
this.$router.push({
    name:'Child',
    query:{
        id:123
    }
})

子路由可以通过下面代码获取传递过来的参数

this.$route.query.id