Vue- 后置路由守卫 (afterEach) 以及独享路由守卫 (beforeEnter)

作者：不觉心动

2023-06-14
北京
本文字数：1373 字
阅读完需：约 5 分钟

后置路由守卫(afterEach)

既然有前置路由，那么相对的也有后置路由，在初始化的时候和每次路由切换之后被调用，它也有 to 和 from 并且和前置守卫的作用是一样的，区别就是前置路由有 next，后端路由主要是做切换后的工作

改变页签效果

这时候我想要加一个功能，点击哪个路由会把对应的页签也换成这个路由的名称我们

首先要给每一个路由增加对应的页签名称，可以存放到 meta 里面，这时候用后置路由实现最合适不过，但是最好把 index.html 里面的 title 名称也改掉

独享路由守卫(beforeEnter)

顾名思义就是某一个路由单独享用的守卫，它同样会收到 to,from,next 三个参数，逻辑和全局守卫一样

比如只想对 news 路由做出限制，其他的路由不管

值得注意的是它是配置路由里面的一个属性，并且它只有前置没有后置，独享的前置路由守卫和全局的后置路由守卫可以配合使用

功能其实和全局守卫是一样的，只不过全局路由守卫可以控制多个，而它只能控制一个

组件内路由守卫

这是最好一种路由守卫，和前面几种都不同，它是在组件里面去写的路由守卫，而不是在路由配置文件里面写的路由守卫，可以说这种路由守卫是独享路由守卫和全局守卫的结合体，只不过是在组件里面编写的

这种路由守卫使用的场景比较少，如果想在组件里面写点这个组件独有的逻辑，可以借助这种守卫，组件内路由守卫也是可以和全局后置守卫互用的

beforeRouteEnter(进入守卫)

路由进入之前通过路由规则进入该组件时被调用，可以把全局前置路由那一套鉴权规则写道这里面

beforeRouteLeave(离开守卫)

路由进入之后通过路由规则离开该组件时被调用

总结

作用：对路由进行权限控制
分类：全局守卫、独享守卫、组件内守卫
全局守卫:

//全局前置守卫：初始化时执行、每次路由切换前执行router.beforeEach((to,from,next)=>{        console.log('beforeEach',to,from)        if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制                if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则                        next() //放行                }else{                        alert('暂无权限查看')                        // next({name:'guanyu'})                }        }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){        console.log('beforeEnter',to,from)        if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制                if(localStorage.getItem('school') === 'atguigu'){                        next()                }else{                        alert('暂无权限查看')                        // next({name:'guanyu'})                }        }else{                next()        }}

复制代码

组件内守卫：

//进入守卫：通过路由规则，进入该组件时被调用beforeRouteEnter (to, from, next) {},//离开守卫：通过路由规则，离开该组件时被调用beforeRouteLeave (to, from, next) {}

复制代码

发布于: 刚刚阅读数: 5

不觉心动

关注

还未添加个人签名 2019-05-27 加入

还未添加个人简介

发布

暂无评论

创作场景

Vue- 后置路由守卫 (afterEach) 以及独享路由守卫 (beforeEnter)

后置路由守卫(afterEach)

改变页签效果

独享路由守卫(beforeEnter)

组件内路由守卫

beforeRouteEnter(进入守卫)

beforeRouteLeave(离开守卫)

总结

不觉心动

评论