Vue学习笔记-路由守卫
2023-12-14 04:04:32
作用
对路由进行权限控制
分类
全局守卫、独享守卫、组件内守卫
- 全局守卫(beforeEach、afterEach),写在路由配置项的最后(
/router/index.js
)//创建一个路由器 const router = new VueRouter({ routes:[ { name:'aboutName', path:'/about', component:AboutVue, //用户自定义元数据可以存放在meta属性中 meta:{ isAuth:true, title:'关于界面', ...... } }, ...... ] }); //(全局前置路由守卫)-设置在每次切换路由之前,以及路由初始化的时候,都需要调用的函数 router.beforeEach((to, from, next)=>{ /* to:即将去往的路由组件相关信息对象(“要到哪里去”的信息) from:来自于的路由组件相关信息对象(“你从哪里来”的信息) next:放行函数 */ if(to.meta.isAuth){//判断是否需要鉴权 if(localStorage.getItem('userName') === 'handsomeBoy'){ next(); }else{ alert('检测到当前用户名不满足要求') } }else{ next(); } }); //(全局后置路由守卫)-路由初始化的时候,以及切换路由之后被调用 router.afterEach((to,from)=>{ if(to.meta.title){//如果为to组件配置了title,则修改网页的title document.title = to.meta.title }else{ document.title = '默认title' } });
- 独享守卫(beforeEnter),写在某些路由组件配置项内部(
/router/index.js
)
顾名思义,就是专门为某个路由组件配置的控制逻辑{ name:'newsName', path:'news',/*二级路由不用写斜杠*/ component:NewsVue, //设置路由元数据(自己定义k-v) meta:{ isAuth:true, }, //独享路由守卫,当切换进入当前路由前触发 beforeEnter(to,from,next){ //放行函数 if(to.meta.isAuth){//判断是否需要鉴权 if(localStorage.getItem('userName') === 'handsomeBoy'){ next(); }else{ alert('检测到当前用户名不满足要求') } }else{ next(); } }, },
- 组件内守卫(beforeRouteEnter、beforeRouteLeave),写在组件文件中(
xxx.vue
)
触发的必要条件:必须是通过路由规则进行切换时//通过路由规则,进入组件时调用 beforeRouteEnter(to,from,next){ ...... }, //通过路由规则,离开该组件时调用 beforeRouteLeave(to,from,next){ ...... }
文章来源:https://blog.csdn.net/theLuckyLong/article/details/134825940
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!