1. query：

第一种  name引入  query传参

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

routes基于name设置：
{
  path: '/hhhhhhh', //这里可以任意
  name: 'W',  //这里必须是W
  component: W
}

然后就把path匹配添加到url上去：
http://localhost:8080/#/hhhhhhh?id=1234&age=12
第二种  path引入  query传参

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

基于path来设置routes：
{
  path: '/W', //这里必须是W
  name: 'hhhhhhhh',  //这里任意
  component: W
}

 url:http://localhost:8080/#/W?id=1234&age=12
这两种方法，都可以自定义path的样式，
 不过一个是在router-link to里面定义，一个则是在routes里面定义

接收参数:

在接收参数的时候都是使用this.$route.query.id

2. parmas

这里只能用name不能用path，不然会直接无视掉params中的内容

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

然后在routes中添加:
{
      path:'/W/:id/:age',
      name:'W',
      component:W
}

这里的name与上面router-link中的name保持一致

url就取决于这个path的写法  http://localhost:8080/#/W/1234/12


注意，path里面的/w可以任意写，写成/hhhhh也可以。
但是！/:id和/:age不能省略，且不能改名字

不写的话，第一次点击可以实现组件跳转，且可以通过this.$route.parmas.id获取到传过来的id值，

但如果刷新页面，传过来的id值和age值就会丢失。从这也能看出params比query严格。

3、两种传参区别

query:
  this.$router.push({
    path: '/home',
    query: {
      site: [],
      bu: []
    }
  })
params:
  this.$router.push({
    name: 'Home', // 路由名称
    params: {
      site: [],
      bu: []
    }
  })  
params: /router1/:id, /router1/123, /router1/789, 这里的id 叫做 params
query: /router1?id=123, /router?id=456, 这里的id 叫做 query
两者传参参数的区别

query 传递配置的时path，而params传递配置的是name，在params中配置path无效
query在路由配置不需要设置参数，而params必须设置
query传递的参数会显示在地址栏中
params传递刷新会无效，但是query会保存传递过来的值，刷新不变；

路由的配置

query:
  {
    path: '/home',
    name: Home,
    component: Home
  }
params:
  {
    path: '/home/:site/:bu',
    name: Home,
    component: Home
  }

如果路由上面不写参数，也是可以传递过去的，但不会再URL上面显示出你的参数，并且当你跳转到别的页面或者刷新页面的时候参数会丢失，那依赖这个参数http请求或者其他操作就会失败

在接受跳转的页面获取路由参数

created(){
  let self = this
  self.getParams()
},
watch(){
'$router': 'getParams'
},
methods: {
  getParams(){
    let site = this.$route.query.site
    let bu = this.$route.query.bu
    // 如果是params传参，那就是this.$router.params.site
  }
}

**注意：获取路由上面的参数，用的是$route，后面没有 r **

1.params是路由的一部分，必须要有。query是拼接在url后面的参数，没有也没关系。
2.params一旦设置在路由，params就是路由的一部分，如果这个路由params传参，但是在跳转的时候没有传递这个参数，会导致跳转失败或者页面会没有内容。
3.params、query不设置也可以传参，但是params不设置的时候，刷新页面或者返回参数会丢失，query并不会出现这种情况。