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
本博客文章均為作者原創，轉載請注明作者和原文鏈接。