Vue路由传参的3种形式

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

<div class="action-btn" @click="viewDetails(item.id)">查看详情</div>

 一、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;
}

 四、总结对比