vue-router中query和params传参的区别通过vue-router路由传参的时候，有两个参数可以用，一个是

人的一生，总是难免有浮沉。
不会永远如旭日东升，也不会永远痛苦潦倒。
反复地一浮一沉，对于一个人来说，正是磨练。
因此，
浮在上面的，不必骄傲；
沉在底下的，更用不着悲观。
必须以率直、谦虚的态度，乐观进取、向前迈进。

                  ——松下幸之助

说明

通过vue-router路由传参的时候，有两个参数可以用，一个是query，另一个是parmas。

假设我们现在需要实现一个路由切换，点击之切换到W组件,并传递一个id值和一个age值。我们运用router-link来写然后一连串的疑惑就产生了

<router-link :to="{ A: 'xxx', query: { xx:'xxx' }}" />
<router-link :to="{ A: 'xxx', params: { xx:'xxx' }}" />

到这里我们会疑惑：

<router-link :to="{ name: 'W', query: { id:'1234'，age:'12' }}"/>
<router-link :to="{ path: '/W', query: { id:'1234',age:'12' }}"/>

当我们使用query参数时，name和path都可以用：

{
  path: '/student', //这里可以任意
  name: 'W',  //这里必须是W
  component: W
}

匹配路由是：

http://localhost:8080/#/student?id=1234&age=12

{
  path: '/W', //这里必须是W
  name: 'student',  //这里任意
  component: W
}

匹配路由是：

url:http://localhost:8080/#/W?id=1234&age=12

这两种方法，都可以自定义path的样式，我们可以在router-link通过 to来定义，也可以通过routes定义。

routes定义，示例如下：

this.$router.push({
    path:'/xxx',
    query:{
        id:id,
        age:age
    }
})

在router-link里面定义，一般用在html中，而routes一般用在js中动态添加

不管使用name还是使用path,在接收参数的时候都是使用this.$route.query.id

<router-link :to="{ name: 'W', params: { id:'1234',age:'12' }}"/>

当我们使用params参数时，只能用name不能用path，不然会直接无视掉params中的内容。我们在路由中定义：

{
    path:'/W/:id/:age',
    name:'W',
    component:W
}

这里的name与上面router-link中的name保持一致 url就取决于这个path的写法,最后匹配路由：

http://localhost:8080/#/W/1234/12

注意，path里面的/w可以任意写，但是/:id和/:age不能省略，且不能改名字不写的话，第一次点击可以实现组件跳转且可以通过this.$route.params.id获取到传过来的id值，但如果刷新页面，传过来的id值和age值就会丢失。

不管使用params还是query方式，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：

const User = {
  template: '...',
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  }
}

路由监听的写法也可以如下图所示：

在上面的例子中，如果仔细的话会发现，传参时使用this.$router,而接收参数时使用this.$route,这里一定要注意！

$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
$route为当前router跳转对象，里面可以获取name、path、query、params等,这个属性是只读的，里面的属性是 immutable (不可变) 的，不过你可以 watch (监测变化)