vue路由传参方式

一、path形式

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

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

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

另外，在详情页面中可以通过 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
   }

另外，在详情页面中可以通过 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;
}

四、总结对比