Vue路由守卫笔记-CSDN博客

本文链接：https://blog.csdn.net/liyaodong1234/article/details/134938226

路由守卫

当路由切换时，判断权限

路由守卫类型

1.全局守卫
2.独享守卫
3.组件内守卫

1.全局守卫

1.前置路由守卫全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
在需要加上路由守卫的路由配置中加上
meta：{isAuth：true}

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

//全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to, from, next) => {
    //如果路由需要验证
    if (to.meta.isAuth) {
        if (localStorage.getItem('123') === '123') {
            next()  //放行
        } else {
            alert('抱歉，您无权限查看！')
        }
    } else {
        // 否则，放行
        next()
    }
})

2.后置路由守卫，路由跳转之后执行的事件，一般用作跳转路由后更改网页名

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

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

3.独享路由守卫，某一个路由所单独享用的路由守卫，独享路由守卫只有前置没有后置

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

4.组件内守卫

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