Vue 路由守卫

• 全局前置守卫 router.beforeEach

• 当一个导航触发时，全局前置守卫(在进入组件之前)按照创建顺序调用。

• vue-router 提供的 router.beforeEach（(to，from，next)=>{}）可以方便地实现全局前置导航守卫

  • to：即将要进入的目标 路由对象
  • from:当前导航正要离开的路由
  • next:下一步执行

router.beforeEach((to,from,next)=>{
    //根据用户的登录状态限制用户是否能跳转到首页面
        if(to.path=="/login"||to.path=="/register"){
            next()
        } else {
            alert("当前为付费页面 请登录后访问！")
            next("/login")
        }
    })

全局后置钩子 router.afterEach

• 当一个导航触发时，全局后置钩子(在进入组件之后)调用。

• vue-router提供的router.afterEach((to,from)=>{})实现全局后置守卫

  • to：即将要进入的目标 路由对象
  • from:当前导航正要离开的路由

全局后置钩子 
​
- 当一个导航触发时，全局后置钩子(在进入组件之后)调用。
- vue-router提供的router.afterEach((to,from)=>{})实现全局后置守卫 
  - to：即将要进入的目标 路由对象
  - from:当前导航正要离开的路由

• 路由独享的守卫

  • 与全局前置守卫相比路由独享守卫只是对当前路由进行单一控制参数和全局前置守卫相同

  • 在路由配置上直接定义beforeEnter进行路由独享守卫定义

        {
            path:'/shop',
            name:'Shop',
            component:Shop,
            beforeEnter:(to,from,next)=>{
                //判断是否登录过
                alert("当前页面是vip页面！请登录")
                next("/login")
            }
        }
    

• 组件内的守卫（只对当前组件生效）

  • beforeRouteEnter在进入组件前调用（不常用）

    • 在组件中使用beforeRouteEnter(to,from,next){}来进行进入组建前的钩子

  • beforeRouteLeave离开路由之前（常用）

    • 在组件中使用beforeRouteLeave(to,from,next){}来进行离开组件的钩子

        beforeRouteLeave(to,from,next){
            if(confirm("你确定要离开吗")){
            next()
            }else{
            //不进行下一步（也就是不从当前路由离开）
                next(false)
            }
        }
    

\