导航守卫分类(全局守卫、路由独享守卫、组件内的守卫)
导航守卫分类:(共三大类)
需求:
vue项目中经常在路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。
全局守卫:
全局前置守卫:
-
- 当一个导航触发时,全局前置守卫(在进入组件之前)按照创建顺序调用。
- vue-router 提供的 router.beforeEach((to,from,next)=>{})可以方便地实现全局前置导航守卫
- to:即将要进入的目标 路由对象
- from: 当前导航正要离开的路由
- next: 下一步执行
全局后置守卫:
-
- 当一个导航触发时,全局后置钩子(在进入组件之后)调用。
- vue-router 提供的 router.afterEach((to, from) => {})实现全局后置守卫
- to:即将要进入的目标 路由对象
- from: 当前导航正要离开的路由
路由独享守卫:
-
- 与全局前置守卫相比路由独享守卫只是对当前路由进行单一控制参数和全局前置守卫相同
- 在路由配置上直接定义 beforeEnter 进行路由独享守卫定义
组件内的守卫:
1.beforeRouteEnter在进入组件前调用(用的较少)
2.beforeRouteLeave在进入组件后调用(用的较多)