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

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

作者: 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