vue-cli学习-全局前置守卫

导航守卫

导航守卫的作用就是跳转或取消跳转的导航功能，比如登录跳转方案
首先，第一个先来看下全局前置守卫跳转，这里采用新的项目创建
创建一个 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")
})