Vue路由传参的3种形式

分手后的思念是犯贱 2021-08-02 13:32 386阅读 0赞

### Vue路由传参的3种形式 ###

在列表向详情页面跳转，而后在详情页面查看列表的详情信息，此时设计路由传参，*vue*中有3种传参形式，介绍如下：

#### 一、path形式 ####

methods：{ 
      viewDetails(id) { 
           //直接调用$router.push 实现携带参数的跳转
            this.$router.push({ 
              path: `/particulars/${ id}`,
            })
    }

此方法，**会**将参数直接拼接在URL上面，需要在路由文件中配置动态路由，具体的配置如下：

{ 
         path: '/orderDetails/:id',
         name: 'orderDetails',
         component: orderDetails
    }

另外，在详情页面*orderDetails.vue*中可以通过 *this.$route.params.id* 来获取传递的参数，具体如下：

created(){ 
        this.orderId = this.$route.params.id;
    }

优点：页面刷新不会产生数据丢失的问题。

--------------------

#### 二、name + params形式 ####

methods：{ 
      viewDetails(id) { 
           this.$router.push({ 
              name: 'orderDetails',
              params: { 
                id: id
              }
            })
      }

此方法，**不会**将参数直接拼接在URL上面，在路由配置的时候，不需要使用动态路由配置，具体如下：

{ 
         path: '/orderDetails',
         name: 'orderDetails',
         component: orderDetails
       }

另外，在详情页面*orderDetails.vue*中可以通过 *this.$route.params.id* 来获取传递的参数，具体如下：

created(){ 
        this.orderId = this.$route.params.id;
    }

缺点：页面刷新会产生数据丢失的问题。

--------------------

#### 三、path + query形式 ####

methods：{ 
      viewDEtails(id) { 
            this.$router.push({ 
              path: '/orderDetails',
              query: { 
                id: id
              }
            })
      }

此方法，会将参数拼接到URL上面，并且使用 *key=value* 的形式，对应的路由不需要配置成动态路由，具体如下：

{ 
         path: '/orderDetails',
         name: 'orderDetails',
         component: orderDetails
       }

另外，在详情页面 *orderDetails.vue* 中可以通过 *this.$route.query.id* 来获取传递的参数，具体如下：

created(){ 
        this.orderId = this.$route.query.id;
    }

--------------------

#### 四、总结对比 ####

<table> 
 <thead> 
  <tr> 
   <th>形式</th> 
   <th align="left">路由</th> 
   <th align="left">特点</th> 
   <th align="left">参数获取</th> 
   <th>url</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>name + params</td> 
   <td align="left">非动态路由</td> 
   <td align="left"><strong>不可刷新</strong></td> 
   <td align="left">this.$route.params.id</td> 
   <td>/orderDetails</td> 
  </tr> 
  <tr> 
   <td>path</td> 
   <td align="left"><strong>动态路由</strong></td> 
   <td align="left">可刷新</td> 
   <td align="left">this.$route.params.id</td> 
   <td>/orderDetails/1</td> 
  </tr> 
  <tr> 
   <td>path + query</td> 
   <td align="left">非动态路由</td> 
   <td align="left">可刷新</td> 
   <td align="left"><strong>this.$route.query.id</strong></td> 
   <td>/orderDetails?id=1</td> 
  </tr> 
 </tbody> 
</table>

--------------------

#### 五、温馨提示 ####

更多博文，请关注：**xssy5431** 【小拾岁月】

扫码：  
![小拾岁月][20200619122146653.jpg]

[20200619122146653.jpg]: /images/20210802/da9c38edb0c0471ab1295da366614dca.png