标签：vue console cli 前置 next 守卫 跳转 路由 log

导航守卫

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

router.beforeEach((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,console,cli,前置,next,守卫,跳转,路由,log
来源： https://www.cnblogs.com/keacua/p/15315213.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。