vue-router导航守卫（二）——全局守卫

 

全局守卫，是指路由实例上直接操作的钩子函数，他的特点是所有路由配置的组件都会触发（直白点就是触发路由就会触发这些钩子函数），如下的写法。钩子函数执行顺序包括beforeEach、beforResolve、afterEach三个。

 

const router = new VueRouter({ ... })

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

 

（1）【beforeEach】

　　　在路由跳转前触发，参数包括to、from、next这三个，这个钩子作用主要是用于登录验证，也就是路由还没跳转提前告知，以免跳转了再通知就为时已晚。

（2）【beforeResolve】

　　　这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to、from、next三个。

　　   和beforeEach区别为：在 beforeEach 和 组件内 beforeRouteEnter 之后，afterEach之前调用。

（3）【afterEach】

　　　和beforeEach相反，它是在路由跳转完成后触发，参数包括to,from没有了next。

　　　它发生在beforeEach和beforeResolve之后，beforeRouteEnter（组件内守卫，后讲）之前。