Vue之this.$route.query和this.$route.params的使用与区别

项目中遇到禁止url带参数，于是整理一下常用的两种传参方式的区别吧

一、this.$route.query的使用

1.传参数

this.$router.push({
         path: /trading,
         query:{
               id:id,
          }
})

this.$router.push({ path: /trading, query:{ id:id, } })

2.获取参数( query相对应的是path params相对应的是name )

this.$route.query.id

this.$route.query.id

3.url的表现形式(url中带有参数)

http://localhost:8090/#/trading?id=1

PS: 页面之间用路由跳转传参时，刷新跳转后传参的页面，数据还会显示存在

二、this.$route.params的使用

1.传参数

this.$router.push({
         name: trading,
         params:{
               id:id,
          }
})

this.$router.push({ name: trading, params:{ id:id, } })

2.获取参数

this.$route.params.id

this.$route.params.id

3.url的表现形式(url中不带参数)

　http://localhost:8090/#/trading

PS: 页面之间用路由跳转传参时，刷新跳转后传参的页面，数据不存在

彩蛋：this.$route.query的使用方法二

(直接拼接形式)

1.传参：

2.接收参数：

代码如下：

//地图点击
 _this.$router.push(
  `/trading?name=${params.name}&xzqid=${params.data.xzqid}`
);

  if (this.$route.query.xzqid){
     this.dataArea = this.$route.query.xzqid;
  }

  if(this.$route.query.name){
     this.name = this.$route.query.name;
  }

//地图点击 _this.$router.push( `/trading?name=${params.name}&xzqid=${params.data.xzqid}` ); if (this.$route.query.xzqid){ this.dataArea = this.$route.query.xzqid; } if(this.$route.query.name){ this.name = this.$route.query.name; }

项目中遇到禁止url带参数，于是整理一下常用的两种传参方式的区别吧 一、this.$route.query的使用 1.传参数 this.$router.push({ path: /trading, query:{ id:id, } }) 2.获取参数( query相对应的是path params相对应的是name ) this.$route.query.id 3.url的表现形式(url中带有参数) http://localhost:8090/#/trading?id=1 PS: 页面之间用路由跳转传参时，刷新跳转后传参的页面，数据还会显示存在 二、this.$route.params的使用 1.传参数 this.$router.push({ name: trading, params:{ id:id, } }) 2.获取参数 this.$route.params.id 3.url的表现形式(url中不带参数) 　http://localhost:8090/#/trading PS: 页面之间用路由跳转传参时，刷新跳转后传参的页面，数据不存在 彩蛋：this.$route.query的使用方法二 (直接拼接形式) 1.传参： 2.接收参数： 代码如下： //地图点击 _this.$router.push( `/trading?name=${params.name}&xzqid=${params.data.xzqid}` ); if (this.$route.query.xzqid){ this.dataArea = this.$route.query.xzqid; } if(this.$route.query.name){ this.name = this.$route.query.name; }