Vue导航守卫

导航守卫：

帮助我们解决一些在组件加载之前可以做一些操作，尤其是异步操作，这样可以避免组建加载完毕之后，却没有数据的尴尬。当然，你不应该在组件加载之前做太多的异步操作，这样会导致页面的白屏时间过长，用户体验也很差，所以，须慎用导航守卫。（异步操作是独立于生命周期之外的操作，因此vue并不会乖乖的先执行完beforeCreate周期中的异步操作，验证了信息后再执行下一周期，而是先执行完整个生命周期再执行异步操作，这样的做法会导致，vue实例在渲染dom的时候由于大量数据得不到，渲染出一个很丑的页面）

 

完整的导航解析流程

导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

 

导航守卫分为：全局守卫、路由独享的守卫以及组件内的守卫

 vue路由钩子大致可以分为三类：

1、全局钩子，主要包括beforeEach和afterEach

这类钩子主要作用于全局，一般用来判断权限，以及页面丢失时需要执行的操作。

//使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
    const role = localStorage.getItem('ms_username');
    if(!role && to.path !== '/login'){
        next('/login');
    }else if(to.meta.permission){
        // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
        role === 'admin' ? next() : next('/403');
    }else{
        // 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容
        if(navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor'){
            Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏
            览器查看', '浏览器不兼容通知', {
                confirmButtonText: '确定'
            });
        }else{
            next();
        }
    }
})

 2、单个路由里的钩子

主要用于写某个指定路由跳转时需要执行的逻辑

 

{
                    path: '/dashboard',
                    component: resolve => require(['../components/page/Dashboard.vue'], resolve),
                    meta: { title: '系统首页' },
                    beforeEnter: (to, from, next) => {
                        
                      },
                    beforeLeave: (to, from, next) => {
                        
                    }
                
},

 3、组件路由

主要包括beforeRouteEnter和beforeRouteUpdate,beforeRouteLeave，这几个钩子都写在组件里面，也可以传递三个参数（to,from,next）

 

$route与$router的区别

$route是"路由信息对象",包括path、params、hash、query，fullPath，matched，name等路由信息参数。

而$router是“路由实例对象”，包括了路由的跳转方法，钩子函数等。