当前位置：首页 > news >正文

Vue的路由守卫

news 2025/8/17 0:17:20

对于绝大部分的网站而言，都是有个人主页的，但是你如果没登陆的话，还能访问个人主页吗？从逻辑上来讲，那肯定是不行的。所以，要怎么阻止没登录状态下去访问个人主页呢？就是利用路由守卫，对路由实现权限控制。

而在Vue中，路由守卫分为三种：全局路由守卫、独享路由守卫和组件内路由守卫

全局路由守卫

顾名思义，全局路由守卫就是对所有的路由都能进行权限控制。全局路由又分为全局前置守卫和全局后置守卫。

全局前置守卫

全局前置守卫，会在组件初始化时调用，每次路由切换之前都会调用。即此时处于A页面，想跳转到B页面时，会先通过全局前置守卫进行判断，如果通过了，那就会跳转，否则就阻止跳转。

//全局前置守卫
router.beforeEach((to,from,next) =>{//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象//第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
})

全局后置守卫

全局后置守卫，在组件初始化时调用，以及每次路由切换之后调用。即，此时处于A页面，要跳转到B页面，在跳转完毕后会执行其中的回调。所以，一般可以用来路由跳转后的相应页面操作。

router.afterEach((to,from) =>{//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象
}

所以，我们就可以把鉴权的操作写在前置守卫中，而后置守卫可以用于简单的欢迎语弹窗。

//全局前置守卫：初始化时执⾏、每次路由切换前执⾏
router.beforeEach((to,from,next)=>{console.log('beforeEach',to,from)if(to.meta.isAuth){ //判断当前路由是否需要进⾏权限控制if(localStorage.getItem('username') === 'Eric'){ //权限控制的具体规则next() //放⾏ }else{alert('暂⽆权限查看') }}else{ // 当前路由不需要权限控制next() //放⾏ }
})//全局后置守卫：初始化时执⾏、每次路由切换后执⾏
router.afterEach((to,from) => {console.log('afterEach',to,from)if(to.meta.title){document.title = to.meta.title //修改⽹页的title}else{document.title = 'vue_test'}
})

独享路由守卫

独享路由守卫，是在进入组件时被调用，区别在于，想对那个路由进行权限控制就直接在其路由配置项中添加守卫，而其作用域也仅限于该路由。

beforeEnter(to,from,next){//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象//第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
}

效果其实差不多，但全局路由守卫针对所有路由组件，独享路由守卫只服务于被配置的那个路由组件

组件内守卫

当使用路由规则进入或者离开该组件时，会触发组件内守卫的调用，组件内守卫的作用域也仅限于该组件。

//进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象//第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
},
//离开守卫：通过路由规则，离开该组件时被调用
beforeRouteLeave (to, from, next) {//第一个参数to，包含的内容是切换后的路由对象，也就是跳转后的路由对象//第二个参数from，包含的内容的是切换前的路由对象，也就是跳转前的路由对象//第三个参数next()，是否往下执行，执行的话，如果不写的话路由就不会跳转，操作将会终止
}