什么是导航守卫

“导航” 表示路由这种发生改变。 vue-router 提供了导航守卫用来对路由的跳转进行了限制。 导航首位有好几种：全局守卫，单个路由的守卫，组件级的守卫

导航守卫钩子

导航这行为可以分为前中后等不同的阶段，所以我们可以通过钩子来做一些事情，类似于生命周期钩子。

• 全局钩子

1. router.beforeEach

router.beforeEach( (to,from,next)=>{
	next()
} )

beforeEach接收三个参数，to：前往哪里。from：从哪里来；next：是否允许导航。

2. router.beforeResolve 与beforeEach类似，区别是，beforeResolve在所有组件内守卫和异步路由组件被解析之后才会被调用。

3. router.afterEach afterEach是后置钩子，这个钩子不接受next，不会改变导航本身。

• 路由内的守卫

1. beforeEnter 它同样接收三个参数，表示在导航入组件内之前执行一个函数。

• 组件内守卫

1. beforeRouterEnter 进入组件渲染之前调用，所以该钩子内不能调用该实例的this。

但是，我们可以对next传递一个实例作为参数的回调给他。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

beforeRouterEnter是唯一一个next接收回调的钩子，因为其他钩子可以直接访问this。

2. beforeRouterUpdate 在路由发生改变，但是组件被复用是调用，例如通过params对组件动态传参，并进行导航，那么该钩子会被触发。

3. beforeRouterLeave 导航离开该组件的对应路由时调用。