美文网首页web 前端
三种路由传参方式

三种路由传参方式

作者: 萬wan事顺意 | 来源:发表于2020-07-23 18:04 被阅读0次

1、通过query传递参数
query传参可以认为是get传参,参数会在请求的url中显示出来,获取的时候通过query获取,
通过path来匹配相应的组件。
实例如下

this.$router.push({ path: '/provide/answer/detail' ,query: {id:row.id}});

获取的时候通过

this.$route.query.id

2、通过params传参,不会在url中显示出来
params传参可以认为是post的方法,因为params传参是看不到参数的,获取的时候通过params来获取。通过name来匹配相应的组件。

实例如下

this.$router.push({
        name:'newInfo',
        params: {
          ids: ID,
          goodsClassName: this.goodsClassName,
          goodsClassGuid: this.goodsClassGuid,
          supplierId:this.supplierguid
        }
      });

获取的时候

this.$route.params.supplierId

3.直接在路由地址后面拼接参数

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

获取

this.$route.params.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

  • Flutter 路由传参小结

    Flutter路由传参总体来说有两种方式,一种是通过构造函数传参,一种是通过路由参数传参。这两种方式都可以使用自定...

网友评论

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

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