美文网首页
通俗易懂——路由传参的三种方式

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

作者: chang_遇见缘 | 来源:发表于2020-03-26 15:00 被阅读0次

方法一

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

相关文章

网友评论

      本文标题:通俗易懂——路由传参的三种方式

      本文链接:https://www.haomeiwen.com/subject/xfhymctx.html