Vue路由：this.$router和this.$route的区别

this.$router（代表全局的路由对象）

this.$router 全局路由对象，任何页面都可以通过此方法 调用 push(), go()等方法。一般用于路由跳转。

this.$router.push(路由)

跳转指定路由方式(传参：query与params)：query方式传参路由的属性名是“path” ， params方式传参路由的属性名是“name”

this.$router.push({
  name: 'pageA',
  params: {
     // 这个arr在页面跳转时，会传到目标页，但是它并不会出现
     // 地址栏中（因为在定义路由时，没有设置对应的占位符），
     arr: [1, 2, 3, 4, 6],
     id: 1,
     age: 100
     }
    })
    // 路由为/pageA/:id，params: {id: 123} 那么最后生成的路由为：/pageA/123/


this.$router.push({
   path: '/pageB',
   query: {
     // query中的内容一定会在地址栏中出现
     arr: [1, 2, 3, 4, 6],
     id: 1,
     age: 100
      }
    })
   path: '/pageB',
   query: {state: this.state},  // 这个是放在?后面的
// 如：this.$router.push({'path':'/pageB', query:{id=1}})，生成的路由为：/pageB?id=1

this.$route

this.$route 表示当前正在用于跳转的路由器对象。可用来接受当前路由，显示其name、path、query、params等属性

1.$route.path 
字符串，等于当前路由对象的路径，会被解析为绝对路径，如 "/home/news" 。
2.$route.params 
对象，包含路由中的动态片段和全匹配片段的键值对。
3.$route.query 
对象，包含路由中查询参数的键值对。例如，对于 /home/news/detail/01?favorite=yes ，会得到$route.query.favorite == ‘yes‘ 。
4.$route.router 
路由规则所属的路由器（以及其所属的组件）。
5.$route.matched 
数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
6.$route.name 
当前路径的名字，如果没有使用具名路径，则名字为空。

this.$route.query  //表示获取?后的值
this.$route.params //路由名字“/”后的值