导航守卫分类(全局守卫、路由独享守卫、组件内的守卫)

导航守卫分类:(共三大类)

需求:

      vue项目中经常在路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。

全局守卫:

全局前置守卫:

    1. 当一个导航触发时,全局前置守卫(在进入组件之前)按照创建顺序调用。
    2. vue-router 提供的 router.beforeEach((to,from,next)=>{})可以方便地实现全局前置导航守卫
    3. to:即将要进入的目标 路由对象
    4. from: 当前导航正要离开的路由
    5. next: 下一步执行
    6. 导航守卫分类(全局守卫、路由独享守卫、组件内的守卫)_第1张图片

全局后置守卫:

    1. 当一个导航触发时,全局后置钩子(在进入组件之后)调用。
    2. vue-router 提供的 router.afterEach((to, from) => {})实现全局后置守卫
    3. to:即将要进入的目标 路由对象
    4. from: 当前导航正要离开的路由
    5. 导航守卫分类(全局守卫、路由独享守卫、组件内的守卫)_第2张图片

路由独享守卫:

    1. 与全局前置守卫相比路由独享守卫只是对当前路由进行单一控制参数和全局前置守卫相同
    2. 路由配置上直接定义 beforeEnter 进行路由独享守卫定义

组件内的守卫:

      1.beforeRouteEnter在进入组件调用(用的较少)

导航守卫分类(全局守卫、路由独享守卫、组件内的守卫)_第3张图片

      2.beforeRouteLeave在进入组件调用(用的较多)

导航守卫分类(全局守卫、路由独享守卫、组件内的守卫)_第4张图片

 

你可能感兴趣的:(导航守卫分类(全局守卫、路由独享守卫、组件内的守卫))