vue路由传参的三种方式区别（params,query）

最近在做一个项目涉及到列表到详情页的参数的传递，网上搜索一下路由传参，结合自己的写法找到一种适合自己的，不过也对三种写法都有了了解，在此记录一下

  <ul class="table_info" v-for="item in customeLsit">
        <li>{{item.name}}</li>
        <li>{{item.phone}}</li>
        <li>{{item.date}}</li>
        <li class="detail" @click="customeDetail(item.id)">详情</li>

这是列表页面，需要传递参数到详情页，下面给出三种方法

方法一：直接在路由路径后面加参数

customeDetail(id){
      console.log('id',id);
       this.$router.push({
        path:'/custome/customeDetailPage/${id}',
       })
    },
需要对应路由配置如下：
 {
      path:'/custome/customeDetailPage/:id',
      component:CDetailPage
    },
//需要在path中添加/:id来对应参数

//详情页获取传递的参数
 methods:{
    getParams(){
      let routerParams = this.$route.params.id;
       this.customId = routerParams;
       console.log('id',routerParams);
    },

  },
  created(){
    this.getParams()
  }

方法二:利用name属性来匹配路由，然后通过params传递参数

 //列表页面传参数
 customeDetail(id){
       console.log('id',id);
        this.$router.push({
         name:'CDetailPage', //注意一定要用name属性匹配路由
         params:{
           dataObj:id
         }
        })
     },
 //对应路由配置
 {
       path:'/custome/customeDetailPage',
       name:'CDetailPage',
       component:CDetailPage
     },
 //详情页面接收参数
  methods:{
     getParams(){
       let routerParams = this.$route.params.dataObj;
        this.customId = routerParams;
        console.log('id',routerParams);
     },

   },
   created(){
     this.getParams()
   }

第三种方法：通过path匹配路由，然后通过query传递参数

//列表页面传参
customeDetail(id){
      console.log('id',id);
       this.$router.push({
        path:'/custome/customeDetailPage',
        query:{
          name:'id',
          dataObj:id
        }
       })
    },
//路由配置，name属性可有可无
{
      path:'/custome/customeDetailPage',
      component:CDetailPage
    },  //我写的时候是没有用name属性
//详情页获取属性
 methods:{
    getParams(){
      let routerParams = this.$route.query.dataObj;
       this.customId = routerParams;
       console.log('id',routerParams);
    },

  },
  created(){
    this.getParams()
  }

这是query传参是路由显示的参数