美文网首页
路由传参的三种方式

路由传参的三种方式

作者: 用心为你 | 来源:发表于2020-04-13 13:54 被阅读0次

方法一:

    path:`/home/${id}`,
})

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

方法二:

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

相关文章

  • vue路由传参.md

    两种传参方法 1.命名路由传参(name, params方式) 2.路由路径传参(path, query方式...

  • vue中路由跳转传递参数的三种方式

    路由跳转的同时传递参数是比较常见的,传参的方式有三种: 1. 通过动态路由方式 2. 通过query属性传值 3....

  • 2018-09-25 vue初学十(路由的嵌套及传参)

    1.路由的嵌套 案例 2.路由的传参 传参的两种方式 案例

  • Vue-Router

    1. 路由配置 默认路由跳转 在 new Router时可用的配置参数: 2.路由传参 Vue路由传参的几种方式 ...

  • 三种路由传参方式

    1、通过query传递参数query传参可以认为是get传参,参数会在请求的url中显示出来,获取的时候通过que...

  • vue - 路由带参跳转

    vue路由传参按照传参方式可划分为params传参和query传参; params传参分为在url中显示和影藏参数...

  • angular 路由传值

    angualr版本: 在路由传参时有三种方式: 一:在查询参数中传递数据,例如: 传递:/product?id=1...

  • Vue实战第二天

    路由组件传参 动态路由传参 静态路由传参 函数传参htm5 history 模式 设置通用路由,找不到页面跳转自定...

  • vue 路由传参的三种方式

    vue路由传参方式 params query vuex + sessionStore

  • 路由传参的三种方式

    一、通过进行传参 然后在要跳转的吧也面去取id 动态路由传参配置路由 二、通过组件配置 需...

网友评论

      本文标题:路由传参的三种方式

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