vue中动态路由的传参方式及区别

1.直接调用$router.push实现携带参数的跳转

this.$router.push({
    path:"/test/${id}"
})
//对应路由配置如下：
{
    path:"/test/:id",
    name:"Test",
    component:Test
}
//获取参数的方式
this.$route.params.id

2.params方式

this.$router.push({
    name:"Test",
    params:{
        id:id
    }
})
//对应路由配置如下：
{
    path:"/test",
    name:"Test",
    component:Test
}
//获取参数的方式
this.$route.params.id

使用params方式传参时，push的时候必须使用name，在对应路由配置中，path后可以添加参数如/:id，也可以不添加，添加之后会以/的形式在url后跟上参数如/id=XXXX，如果不添加数据就不会显示。

3.query方式 

this.$router.push({
    path:"test",
    query:{
        id:id
    }
})
//对应路由配置如下：
{
    path:"test",
    name:"Test",
    component:Test
}
//获取参数的方式
this.$route.query.id

使用query方式传参时，push的时候必须使用path，参数会以？的形式在url后跟上参数。如?id=XXXX