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

 

项目中遇到禁止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;
  }

 

 

作者：微微一笑绝绝子
出处：https://www.cnblogs.com/wwyxjjz/p/15161738.html
本博客文章均为作者原创，转载请注明作者和原文链接。