Vue知识点-路由守卫

最新推荐文章于 2025-12-21 13:28:14 发布

原创最新推荐文章于 2025-12-21 13:28:14 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章介绍了在Vue项目中使用VueRouter进行权限控制的方法，包括全局前置和后置路由守卫、独享路由守卫以及组件内的路由守卫。通过这些守卫函数，可以在路由切换前后执行特定逻辑，如用户权限验证和页面标题设置。

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

//router>>>index.js
....
//创建并暴露一个路由器
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',
                     conponent:Detail,
                     meta:{isAuth: true,title:'详情'},
                  }
               ]
            }
         ]
      }
   ]
})

//全局前置路由守卫 ---- 初始化的时候被调用、每次路由切换之前被调用
router.beforeEach((to,from,next)=>{
   console.log('前置路由守卫',to,from,next)
   if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
      if(localStorage.getItem('userName') === 'chenmuxiao'){//权限控制的具体规则
         next() //放行
      }else{
         alert('用户名错误，无权限查看')
      }
   }else{
      next() //放行
   }
})

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

export default router

(2). 独享守卫: 某一个路由所独享的,可与全局后置路由守卫共用(例如全局后置守卫中的修改页面标题的功能)

....
....
children:[
   {
      name:'xinwen',
      path:'news',
      component:News,
      meta:{isAuth: true,title:'新闻'},
      beforeEnter(to,from.next){
          console.log('beforeEnter',to,from)
          if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		      if(localStorage.getItem('userName') === 'chenmuxiao'){//权限控制的具体规则
		         next() //放行
		      }else{
		         alert('用户名错误，无权限查看')
		      }
		   }else{
		      next() //放行
		   }
      }
   },
]
....
....

(3). 组件内守卫:也可与全局后置路由守卫共用(例如全局后置守卫中的修改页面标题的功能)

//router>>>index.js
....
//创建并暴露一个路由器
const router = new VueRouter({
   routes:[
      {
         name:'guanyu',
         path:'/about',
         component: About,
         meta:{isAuth:true,title:'关于'}
      },
      ....
   ]
})
....

//About.vue
<template>
   <h2>我是about相关内容</h2>
</template>

<script>
export default {
   name:'About',
   //通过路由规则，进入该组件时被调用
   beforeRouteEnter(to,from,next){
   //进入的时候，to指向about组件
      console.log('About--beforeRouteEnter',to,from)
      if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
		      if(localStorage.getItem('userName') === 'chenmuxiao'){//权限控制的具体规则
		         next() //放行
		      }else{
		         alert('用户名错误，无权限查看')
		      }
		   }else{
		      next() //放行
		   }
      }
   },
   //通过路由规则，离开该组件时被调用
   beforeRouteLeave(to,from,next){
   //离开的时候，from指向about组件
      console.log('About--beforeRouteLeave',to,from)
      next() //放行
   }
}
</script>