导航守卫：

帮助我们解决一些在组件加载之前可以做一些操作，尤其是异步操作，这样可以避免组建加载完毕之后，却没有数据的尴尬。当然，你不应该在组件加载之前做太多的异步操作，这样会导致页面的白屏时间过长，用户体验也很差，所以，须慎用导航守卫。（异步操作是独立于生命周期之外的操作，因此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是“路由实例对象”，包括了路由的跳转方法，钩子函数等。