vue导航守卫

vue-router全局有三个守卫：

作者：OBKoro1
链接：https://juejin.cn/post/6844903641866829838
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

1. router.beforeEach 全局前置守卫 进入路由之前
2. router.beforeResolve 全局解析守卫在beforeRouteEnter调用之后调用
3. router.afterEach 全局后置钩子 进入路由之后
4.   全局守卫  // main.js 入口文件
5.    import router from './router'; // 引入路由
       router.beforeEach((to, from, next) => { 
         next();
       });
       router.beforeResolve((to, from, next) => {
         next();
       });
       router.afterEach((to, from) => {
         console.log('afterEach 全局后置钩子');
       });

6. to,from,next 这三个参数：

   to和from是将要进入和将要离开的路由对象,路由对象指的是平时通过this.$route获取到的路由对象。

   next:Function 这个参数是个函数，且必须调用，否则不能进入路由(页面空白)。

7. next() 进入该路由。

8. next(false): 取消进入路由，url地址重置为from路由地址(也就是将要离开的路由地址)。

9. next 跳转新路由，当前的导航被中断，重新开始一个新的导航。

10. 路由独享守卫 

    const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // 参数用法什么的都一样,调用顺序在全局前置守卫后面，所以不会被全局守卫覆盖 // ... } } ]

    
    作者：OBKoro1
    链接：https://juejin.cn/post/6844903641866829838
    来源：稀土掘金
    著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。