Vue中$route和$router的区别

1. $route

$route 表示当前激活的路由对象信息，包含了当前URL解析得到的信息,有以下属性: 

// 在.js文件中获取当前的路由信息
     router.currentRoute 
//在.vue文件中获取当前的路由信息 
     this.$route

1. $route.fullPath:  完成解析后的 URL，包含查询参数和 hash 的完整路径。
2. $route.hash:  当前路由的 hash 值 (不带 #) ，若是没有 hash 值，则为空字符串。
3. $route.matched:  数组，包含当前匹配的路径中所包含的全部片断所对应的配置参数对象。
4. $route.meta:  路由元信息
5. $route.name:  当前路径名字
6. $route.params:  一个 key/value 对象, 包含了动态片断和全匹配片断, 如果没有路由参数，就是一个空对象。
7. $route.path:  字符串，对应当前路由的路径，总是解析为绝对路径
8. $route.query: 一个 key/value 对象，表示 URL 查询参数, 如果没有查询参数，则是个空对象。

 2. $router

 $router对象是全局路由的实例，是router构造方法的实例。常用有以下方法: 

导航守卫:

// 全局前置守卫
router.beforeEach((to, from, next) => {
  /* 必须调用 `next` */
})
// 全局解析守卫
router.beforeResolve((to, from, next) => {
  /* 必须调用 `next` */
})
// 全局后置钩子
router.afterEach((to, from) => {})

2.1 push 

// 字符串
      this.$router.push('home')
// 对象 
      this.$router.push({ path: 'home' })
// 命名的路由
      this.$router.push({ name: 'user', params: { userId: 123 }})
// 带查询参数，变成 /register?plan=123 
      this.$router.push({ path: 'register', query: { plan: '123' }})
// 如果提供了path,那么params和query的配置会被忽略

push方法和<router-link to=''>中的to是等同的。

注意：push方法的跳转会向 history 栈添加一个新的记录，当我们点击浏览器的返回按钮时可以看到之前的页面。

    2.1.1 path:'name' 和 path:'/name' 的区别

如果加 / 则会被当作根目录，否则当前的路径会嵌套在之前的路径中

//比如当前路径是home
this.$router.push({path:'name'})//==>path为/home/name
this.$router.push({path:'/name'})//==>path为/name

2.2 go 和 back

// 页面路由跳转 前进或者后退
this.$router.go(-1) // 后退
// 页面路由跳转后退
this.$router.back()

2.3 replace

push方法会向 history 栈添加一个新的记录，而replace方法是替换当前的页面，
不会向 history 栈添加一个新的记录, 一般使用replace来做404页面

this.$router.replace('/')