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

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

1  <ul class="table_info" v-for="item in customeLsit">
2        <li>{{item.name}}</li>
3        <li>{{item.phone}}</li>
4        <li>{{item.date}}</li>
5        <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传递参数

 1 //列表页面传参数
 2 customeDetail(id){
 3       console.log('id',id);
 4        this.$router.push({
 5         name:'CDetailPage', //注意一定要用name属性匹配路由
 6         params:{
 7           dataObj:id
 8         }
 9        })
10     },
11 //对应路由配置
12 {
13       path:'/custome/customeDetailPage',
14       name:'CDetailPage',
15       component:CDetailPage
16     },
17 //详情页面接收参数
18  methods:{
19     getParams(){
20       let routerParams = this.$route.params.dataObj;
21        this.customId = routerParams;
22        console.log('id',routerParams);
23     },
24 
25   },
26   created(){
27     this.getParams()
28   }

第三种方法：通过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传参是路由显示的参数