vue 导航守卫

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

 

实际项目中常用。在路由发生跳转到导航结束这一段时间内做相应的逻辑处理。（也就是每当进行路由跳转时，需要预先进行一些判断，这是就需要导航守卫）。比如登录验证（未登录去登录页）。

 

 

##全局守卫前置：按顺序调用。

const router = new Router({

   routes

})

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

   //操作

}）

 

接受三个参数：

1. to：Route：即将要进入的目标路由对象
2. from：Route：当前导航正要离开的路由
3. next：function：一定要调用该方法来resolve这个钩子

 

 

## 后置钩子

router.afterEach((to,from) => {

//logining = false 

})

 

afterEach 一般是在路由跳转之后 进行的操作。这些钩子不会接受next函数也不会改变导航本身

 

 

## 路由独享的守卫：beforeEnter

在路由配置上直接定义beforeEnter守卫

 

 

 

 

##组件内守卫 （写在组件内）

 

1、beforeRouteEnter

next()函数不能忘，否则无法跳转。

注意：这个方法是在路由触发要进来这个页面的时候调用，此时页面还没有被渲染。如果这时使用this，是获取不到当前组件的实例的。

 

2、beforeRouteLeave

在路由页面即将离开的时候调用这个方法。比较常用，比如当前是个编辑页面，用户离开的时候需要提醒 编辑未完成，确定离开吗 这种情况。

 

3、beforeRouteUpdate

 

 

一个完整的导航解析流程：

• 导航被触发
• 在失活的组件（即将离开的页面组件）里调用离开守卫 beforeRouteLeave
• 调用全局的前置守卫：beforeEach
• 在重用的组件里调用：beforeRouteUpdate
• 调用路由独享的守卫：beforeEnter
• 解析异步路由组件
• 在被激活的组件（即将进入的页面组件）里调用：beforeRouteEnter
• 调用全局的解析守卫 beforeResolve
• 导航被确认
• 调用全局的后置守卫 afterEach
• 触发DOM更新
• 用创建好的实例调用beforeRouteEnter守卫里传给next的回调函数