vue-router传参的坑(query和params)

1.query方式传参和接收参数

传参:
this.$router.push({
        path:‘/xxx‘
        query:{
          id:id
        }
      })

接收参数:
this.$route.query.id

注意:传参是this.$router,接收参数是this.$route,这里千万要看清了!!!

this.$router 和this.$route有何区别?
在控制台打印两者可以很明显的看出两者的一些区别:

  • 1.$router为VueRouter实例,想要导航到不同URL,则使用$router.push方法
  • 2.$route为当前router跳转对象,里面可以获取name、path、query、params等

2.params方式传参和接收参数

传参:
this.$router.push({
        name:‘xxx‘
        params:{
          id:id
        }
      })

接收参数:
this.$route.params.id

注意:params传参,push里面只能是 name:‘xxxx‘,不能是path:‘/xxx‘,因为params只能用name来引入路由,如果这里写成了path,接收参数页面会是undefined!!!

另外,二者还有点区别,直白的来说query相当于get请求,页面跳转的时候,可以在地址栏看到请求参数,而params相当于post请求,参数不会再地址栏中显示

原文地址:https://www.cnblogs.com/haojf/p/9841533.html

时间: 2024-10-09 14:51:35

vue-router传参的坑(query和params)的相关文章

使用路由传参时,query与params的区别!

query 1:参数会在地址栏显示 2:参数不需要在路由的path后接:args1/:args2 3:获取参数用this.$route.query.args1 params 1:参数需要在路由的path后接:args1/:args2 2:获取参数用this.$route.params.args1 原文地址:https://www.cnblogs.com/erfsfj-dbc/p/10084379.html

vue路由传参query和params路由传参的区别?

相同点:router文件index.js 都是利用name属性. params传递时: params接收时利用this.$route.param进行接受: query路由传参: query接受利用this.$route.query 而展示上params路由传参像Ajax中post传参方式: query路由传参像get传参 原文地址:https://www.cnblogs.com/manban/p/12012567.html

Vue路由传参的几种方式

原 Vue路由传参的几种方式 2018年07月28日 23:52:40 广积粮缓称王 阅读数 12613 前言:顾名思义,vue路由传参是指嵌套路由时父路由向子路由传递参数,否则操作无效.传参方式可以划分为params传参和query传参,params传参又可以分为url中显示参数和不显示参数两种方式.具体区分和使用后续分析. 参考官网:https://router.vuejs.org/zh/guide/essentials/navigation.html params传参(url中显示参数)

vue 路由传参 params 与 query两种方式的区别

初学vue的时候,不知道如何在方法中跳转界面并传参,百度过后,了解到两种方式,params 与 query.然后,错误就这么来了:  router文件下index.js里面,是这么定义路由的: { path:"/detail", name:"detail", component:home } 我想用params来传参,是这么写的,嗯~ this.$router.push({ path:"/detail", params:{ name:'nameV

Vue 页面传参方式 Query 和 Params

1. query 与 params 传参 query ????需要和配合 path 属性使用,携带参数会拼接在请求路径后,效果同 Get 请求方式 http://localhost:8033/Permission/Role/Form?productCode=crm-operate&roleId=1&roleName=admin&roleType=-1&roleDesc=%E7%AE%A1%E7%90%86%E5%91%98 params ????需要配合 name 属性使用

vue路由传参query和params的区别

1.用法 A.query要用path来引入(用name来引入也可以),接收参数都是this.$route.query.name. B.params要用name来引入,接收参数都是this.$route.params.name. 2.效果 A.query类似于ajax中get传参,即在浏览器地址栏中显示参数. B.params则类似于post,即在浏览器地址栏中不显示参数. 3.个人建议 在路由传参上建议使用params,以隐藏参数,做好安全保密.

vue 路由传参的三种基本模式

路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便于子组件获取对应li的数据,显示相应的正确的内容. 父组件中: <li v-for="article in articles" @click="getDescribe(article.id)"> 方案一: getDescribe(id) { // 直接调用$

Vue路由传参及传参后刷新导致参数消失处理

参考:https://blog.csdn.net/qq_43103581/article/details/82260073(vue 路由传递参数,刷新页面后参数丢失) 项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那么返回必然会重新拉取数据),一路百度,刚开始使用 this.$router.push({name:'list', params:{i

vue路由传参

vue路由url 传参 :params 从客户列表页 通过路由跳转到客户详情页 查看客户详情时 需要将当前客户的id 和所属企业的id 当做参数传给后台. 在跳转时,将客户id 和企业id 通过路由传参 传给 客户详情页 客户列表: 客户详情 通过 this.$router.params 获取 参数 路由 router.js 路由传一个对象:query 有时我们需要传很多数据过去,为了避免大量拼接,我们可以传一个对象 通过this.$router.query接收对象参数 这里router 路由