Vue-路由传参 params 与 query的使用和区别

记得初学Vue的时候，不知道如何通过路由跳转界面并传参，去面试也有问到，当时就很尴尬，这么基础的东西说出来不知道，没用过，真的好难堪，谁也不是一开始就什么都会，不懂得及时去查，时间长了总会理解，孰能生巧，这不最近在我工作中常常有跳转页面的需求，下面我跟大家说说params和query两种方式的区别

首先来说明一下route得区别

// $router：是路由操作对象，只写对象
// $route：是路由信息对象，只读对象

// 操作  路由跳转 index.vue
this.$router.push({
    name:'hello',
    params:{
        name:'yuyu',
        age:'11'
    }
})
// 读取  路由参数接收 detail.vue
this.name = this.$route.params.name;
this.age = this.$route.params.age;

1、query使用path和name传参跳转都可以，而params只能使用name传参跳转。

query传参：

//query传参，使用name跳转    index.vue
this.$router.push({ 
    name:'contact',
    query:{ 
        id:id,
        code:code
    }
})
//query传参，使用path跳转    index.vue
this.$router.push({ 
    path:'contact',
    query:{ 
        id:id,
        code:code
    }
})
//query接受参数   detail.vue
this.id = this.$route.query.id;
this.code = this.$route.query.code;

params传参：

// params 传参  使用name
this.$router.push({
      name:'contact',
      params:{
         id:id,
         code:code
      }
})
// params接收参数
this.id = this.$route.params.id;
this.code = this.$route.params.code
//路由
{
    path: '/contact/:id/:code',
    name:'contact',
    component: () => import('@/views/contact'),   // 懒加载
}

需要注意的是：
1、params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
2、params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。
如果路由后面没有 /:id/:name效果如下图，地址栏没有参数
**但是如果你刷新一下，就会发现页面失败，此时我们就可以 路由解耦
得方式来解决，具体得操作请看：https://www.jianshu.com/p/9583a3b56475
**

好了，两者得使用方法和区别就为大家介绍到这里吧，今后也会不断得补充更新，也希望大家多给我些建议，我们共同进步~~~小鱼儿