网站新闻建设作用,网站建设 企业文化,受欢迎的网站建设教程,网站建设引言一、情景说明 我们访问任何一个互联网系统#xff0c;如淘宝、CSDN等#xff0c;都会遇到按钮权限的情况。 那么#xff0c;如何在Vue项目中实现按钮权限控制了#xff1f; 这里就用到了路由守卫技术 它可以类比于SpringBoot项目中的拦截器。 在拦截器里做的权限控制。 …一、情景说明 我们访问任何一个互联网系统如淘宝、CSDN等都会遇到按钮权限的情况。 那么如何在Vue项目中实现按钮权限控制了 这里就用到了路由守卫技术 它可以类比于SpringBoot项目中的拦截器。 在拦截器里做的权限控制。 这一篇主要讲解全局前置守卫 在路由组件切换时都会触发这个全局前置守卫 二、案例 1、给路由配置添加meta元数据用于判断是否需要权限管理 关键配置meta const router new VueRouter({routes:[{name:guanyu,path:/about,component:About,meta:{title:关于}},{name:zhuye,path:/home,component:Home,meta:{title:主页},children:[{name:xinwen,path:news,component:News,meta:{isAuth:true,title:新闻}},{name:xiaoxi,path:message,component:Message,meta:{isAuth:true,title:消息},children:[{name:xiangqing,// path:detail/:id/:title,path:detail,component:Detail,meta:{isAuth:true,title:详情},// props:{a:1,b:hello}// props:trueprops($route){return {id:$route.query.id,title:$route.query.title,a:1,b:hello}}}]}]}] });2、添加全局前置路由守卫 初始化的时候被调用、每次路由切换之前被调用 router.beforeEach((to,from,next){console.log(前置路由守卫,to,from);if(to.meta.isAuth){ //判断是否需要鉴权if(localStorage.getItem(school) china){next()}else{alert(学校名不对无权限查看)}}else{next()} });三、补充 (to,from,next)的参数说明 to是即将要跳转去的路由组件终点 from是从哪个路由组件跳过来的起点 next如果鉴权通过则放行可以正常访问