Vue-admin工作整理（五）：守卫导航

一、作用：

　　它可以帮我们在路由发生跳转，到导航结束的时间内，做一些相应的逻辑处理，分为：全局守卫，和专项守卫

1、全局收尾：

　　(a)、前置守卫：router.beforeEach(to,from,next),router实例的beforeEach方法能够注册一个全局前置守卫，，用途例如做典型的登陆判断，to表示的是即将跳转的路由对象，from表示当前将要离开的路由对象,next是一个函数，如果确定要跳转，那么就将用到next函数

//如果即将访问的页面不是登录页面,如果已经登录，那么直接执行next 直接跳转
if (to.name !== 'login') {
if (HAS_LOGINED) next()
else next({ name: 'login' }) //如果没有登录，那么直接跳转到登录页面，组件name属性为login
} else {
if (HAS_LOGINED) next({ name: 'home' }) //如果跳转的是登录页面，并且已经是登录状态，那么直接跳转到首页
else next() //否则，放行，继续到登录页面
}

　　(b)、后置钩子：所有的页面跳转之后做一些操作，比如一个登录动作，当页面加载完毕后，加一个后置钩子，就可以将正在登录状态关闭掉

router.afterEach((to, from) => {
// logining = false
})

　　(c)、router.beforeResolve,也是一个全局守卫，它是在导航被确认（所有导航钩子结束）之前，所有组件内守卫和异步路由组件被解析之后调用，参数与router.beforeEach一样：(to,from,next)

　　(d)、路由独享守卫：beforeEnter(to, from, next)路由列表里配置
　　(e)、组件内守卫：每一个组件都有3个钩子
　　　　(1)、beforeRouteEnter(to, from, next)，to代表当前路由对象，from表示上一个路由对象,渲染该组件对应路由被确认前调用,就是说页面被触发，已经确定调用页面，但页面还没有渲染的时候，所以this是获取不到当前组件的实例的
　　　　(2)、beforeRouteLeave(to, from, next), 比如页面进行了编辑，在用户要离开的时候，就需要提醒一下用户“编辑内容未保存，是否真的要离开”

beforeRouteLeave (to, from, next) {
const leave = confirm('您确定要离开吗？')
if (leave) next() //如果选择的是leave==确定离开 直接通过next函数跳转
else next(false) //否则，直接将函数设置为false，不做跳转
},

　　　　(3)、beforeRouteUpdate:路由(RUL)被发生变化，组件被复用的时候调用，一般是url第二次变化的时候出现的逻辑处理，此时页面已经渲染，所有使用this是可以访问到当前实例的(){}
总结：、beforeRouteUpdate、beforeRouteLeave因为已经访问到当前实例，因此可以用this，只有、beforeRouteEnter不可以，因为还未实现跳转,但可以在next里通过(vm => { console.log(vm) })回调函数来取当前实例

二、完整的导航解析流程：
1、导航触发
2、在失活的组件（即将离开的页面组件）里调用离开守卫：beforeRouteLeave
3、调用全局的前置守卫 beforeEach
4、在复用的组件里调用 beforeRouteUpdate || 不是复用组件就调用 beforeRouteEnter
5、调用路由独享守卫 beforeEnter（在路由列表里配置）
6、解析异步路由组件
7、在被激活的组件（即将进入的组件页面）里调用 beforeRouteEnter
8、调用全局的解析守卫 beforeResolve
9、导航被确认
10、调用全局的后置守卫 afterEach
11、触发DOM的渲染
12、用创建好的实例调用beforeRouteEnter守卫传给next的回调函数