vue-router 路由守卫

vue-router有三个：

全局守卫

beforeEach 前置守卫
beforeResolve 解析守卫
afterEach 后置守卫

// afterEnter参数只有两个
router.afterEnter(to,from=>{
})

路由守卫

beforeRouteEnter 进入组件之前触发，在Created前面
bforeRouterUpdated 路由更新，但内容不改变
beforeRouterLeave 离开之前触发，在beforeDestory之前触发

组件守卫

beforeEnter 读取路由信息

路由配置

const routes = [
    {
        path:"/",
        name:"首页",
        component: ()=> import('../index.vue'),
        beforeEnter: (to,from,next) => {
            // to:即将要进入的路由对象
            // from: 导航要离开的路由
            next(); //必须调用的函数，不写默认是通不过的，此时也不能进入页面。
            // next:调用该方法来resolve这个钩子，执行效果依赖next方法的调用参数。
            // next(); 进行管道中的下一个钩子
            // next(false); 中断当前导航
            // next('/')或者next({path:'/'}); 跳转不同的地址，当前导航被中断，然后进行下一个新的导航。
            // next(error); 如果传入的参数是一个error实例，导航会被终止并且该错误会被传递给router.onerror()注册过的回调
        }
    }
]

路由前置守卫

{
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    meta: { isAuth: true, title:'主页' },
},


//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
    //如果路由需要跳转
    if (to.meta.isAuth) {
        //判断 如果school本地存储是qinghuadaxue的时候，可以进去
        if (localStorage.getItem('school') === 'qinghuadaxue') {
            next()  //放行
        } else {
            alert('抱歉，您无权限查看！')
        }
    } else {
        // 否则，放行
        next()
    }
})

路由后置守卫

{
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    meta: { isAuth: true, title:'主页' },
},



//全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from) => {
    document.title = to.meta.title || '默认名'    //修改网页的title
})

独享路由守卫

{
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    meta: { isAuth: true },
    beforeEnter: (to, from, next) => {
        if (to.meta.isAuth) { //判断是否需要授权
            if (localStorage.getItem('school') === 'qinghuadaxue') {
                next()  //放行
            } else {
                alert('抱歉，您无权限查看！')
            }
        } else {
            next()  //放行
        }
    }
},

组件内守卫

//通过路由规则，进入该组件时被调用
beforeRouteEnter(to,from,next) {
  if(toString.meta.isAuth){
    if(localStorage.getTime('school')==='qinghuadaxue'){
      next()
    }else{
      alert('学校名不对，无权限查看！')
    }
  } else{
    next()
  }
},
 
//通过路由规则，离开该组件时被调用 
beforeRouteLeave(to,from,next) {
 next()
}

进入一个页面路由所执行的钩子

beforeEach---->beforeEnter---->beforeRouterEnter---->beforeResolve---->affterEach
进入前置守卫---->读取路由信息---->进入组件---->进行解析---->进入后置守卫。