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传参是路由显示的参数