路由 vue-router

this.$router和this.$route的区别是什么？

• this.$router：VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等
• this.$route： 当前激活的路由信息对象，只读、可以 watch，包含path、params、hash、query、fullPath、matched、name、meta等路由信息参数

vue-router 的路由跳转的方法

• 第一种 : 编程式的导航

<router-link to="/" tag="p">耳机频道</router-link>
//to是一个prop.指定需要跳转的路径,也可以使用v-bind动态设置
//tag可以指定渲染成标签,默认是a标签
<router-link to="/" replace>跳转回去</router-link>  
//这样的写法是不会留下历史痕迹,回退键无效
<router-link :to="{ name: 'product', params: { id : 1 }}">User</router-link>
// /product/1

• 第二种 : 函数式的导航

//这里假设 我要跳转product页面并且附带参数id 
//这里定义好了list.id 就是 动态的值
this.$router.push('./product/' + list.id)            // 字符串的方式进行描述
this.$router.push({name : 'product',params: { id : list.id }})  // 命名的路由的方式进行描述
this.$router.push({ path: `/product/${list.id}` })        // 直接定义path类似第一种
//比较常用的跳转路由的方法
//假如是带查询参数
this.$router.push({ path: 'product', query: { id: list.id }})      // /product?id=1

这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击<router-link :to="..."> 等同于调用 router.push(...)。
值得注意的一点是,如果提供了 path，params 的配置将不会生效

还有一些方法

router.replace   //它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录
router.go(1)    //在浏览器记录里面前进一步,等于history.forward()
router.go(-1)    //后退一步记录，等同于 history.back()
router.go(n)    //浏览器记录前进3步

导航守卫

• 全局的
• 单个路由独享的
• 组件内

全局的

路由实例上直接操作的钩子函数，所有路由配置的组件都会触发

• beforeEach：在路由跳转前触发，参数包括to,from,next，钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚。
• beforeResolve ： 路由跳转前触发，参数包括to,from,next，在 beforeEach 和 组件内beforeRouteEnter 之后，afterEach之前调用。
• afterEach：在路由跳转完成后触发，参数包括to,from没有了next,它发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫）之前。

路由独享的

• beforeEnter： 单个路由配置的时候设置的钩子函数

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内的

在组件内执行的钩子函数，相当于为配置路由的组件添加的生命周期钩子函数。

<template>
  ...
</template>
export default{
  data(){
    //...
  },
  beforeRouteEnter (to, from, next) {
  },
  beforeRouteUpdate (to, from, next) {
  },
  beforeRouteLeave (to, from, next) {
  }
}
<style>
  ...
</style>

• beforeRouteEnter：路由进入之前调用，该守卫内访问不到组件的实例，也就是this为undefined，也就是它在beforeCreate生命周期前触发。
  在这个钩子函数中，可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数，可以在这个守卫中请求服务端获取数据，当成功获取并能进入路由时，调用next并在回调中通过 vm访问组件实例进行赋值等操作，（next中函数的调用在mounted之后：为了确保能对组件实例的完整访问）

 beforeRouteEnter (to, from, next) {
  // 这里还无法访问到组件实例，this === undefined
  next( vm => {
    // 通过 `vm` 访问组件实例
  })
}

• beforeRouteUpdate (v 2.2+)：在当前路由改变时，并且该组件被复用时调用，可以通过this访问实例。参数包括to，from，next。 what is 路由改变 or what is 组件被复用？

  • 对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，组件实例会被复用，该守卫会被调用
  • 当前路由query变更时，该守卫会被调用

• beforeRouteLeave：导航离开该组件的对应路由时调用，可以访问组件实例this，参数包括to，from，next。

导航守卫回调参数

to：目标路由对象；
from：即将要离开的路由对象；
next：确保要调用 next 方法，否则钩子就不会被 resolved。

• next()：才能继续往下执行下一个钩子
• next(false)：中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
• next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
• 在 beforeRouteEnter钩子中next((vm)=>{})内接收的回调函数参数为当前组件的实例vm，这个回调函数在生命周期mounted之后调用，也就是，他是所有导航守卫和生命周期函数最后执行的那个钩子。
• next(error): (v2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

执行顺序

当点击切换路由时：

1. beforeRouterLeave：
2. beforeEach：
3. beforeEnter：
4. beforeRouteEnter：
5. beforeResolve：
6. afterEach：
7. beforeCreate：组件生命周期
8. created：组件生命周期
9. beforeMount：组件生命周期
10. mounted：组件生命周期
11. beforeRouteEnter的next的回调：