通俗易懂——路由传参的三种方式

2020-03-26  本文已影响0人  chang_遇见缘

方法一

this.$router.push({
    path:`/home/${id}`,
})

路由配置
{
    path:"/home/:id",
    name:"Home",
    component:Home
}
在Home组件中获取参数值
this.$route.params.id

方法二

通过name来匹配路由,通过param来传递参数
this.$router.push({
    name:'Home',
    params:{
        id:id
    }
})
用params传递参数,不使用:/id
{
    path:'/home',
    name:Home,
    component:Home
}
Home组件中获取参数
this.$route.params.id

方法三

path+query;query传递的参数会通过?id = xxx展示

this.$router.push({
    path:'/home',
    query:{
        id:id
    }
})
路由配置
{
    path:'/home',
    name:Home,
    component:Home
}
获取参数的方法
this.$route.query.id

上一篇下一篇

猜你喜欢

热点阅读