脚本宝典收集整理的这篇文章主要介绍了vue-cli学习-全局前置守卫，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

导航守卫

导航守卫的作用就是跳转或取消跳转的导航功能，比如登录跳转方案
首先，第一个先来看下全局前置守卫跳转，这里采用新的项目创建
创建一个 Login.vue 的视图组件，并配置路由，用于未登录状态的跳转
在路由对象声明后，执行全局前置守卫，就是在跳转之前判断操作方案

router.before@R_777_2428@((to, From, next) => {
      ······
})

模拟登录

//全局前置守卫，拦截路由
router.beforeEach((to, from, next) => {
    console.LOG("开始loading")
    if (flag) {
        // console.log(to)
        // console.log(from)
        if (to.name === 'Login') next('/')
        else next()
    } else {
        //当flag = flase时，防止无限执行递归，判断是否跳转到login页面
        if (to.name === 'Login') next()
        else next('/login')
    }
})

全局后置钩子

一般用于路由页面加载完毕之后操作一些动作

router.afterEach((to, from) => {
    console.log("关闭loading")
})

脚本宝典总结

以上是脚本宝典为你收集整理的vue-cli学习-全局前置守卫全部内容，希望文章能够帮你解决vue-cli学习-全局前置守卫所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。