2025年vue路由守卫作用（vue 路由守卫作用）

大家好，我是讯享网，很高兴认识大家。

在store中的index.js文件中编写

//该文件专门用于创建整个路由
import VueRouter from ‘vue-router’
//引入组件
import AboUt from ‘https://download.csdn.net/blog/column/pages/AbouT'
import HoMe from ’https://download.csdn.net/blog/column/pages/HoMe'
import NeWer from ‘https://download.csdn.net/blog/column/pages/NeWer'
import MessaGe from ’https://download.csdn.net/blog/column/pages/MessaGe'
import DetAil from ‘https://download.csdn.net/blog/column/pages/DetAil'
//创建并暴露一个路由器
const router = new VueRouter({
   routes:[
       //一级路由
       {
           //路由还可以给定一个名字，便于在传参数的时候使用
           name:’dianjiyi‘,
           //这个是路径HTML中的路径
           path:’/about‘,
           //是组件的路径
           component:AboUt,
       },
       {
           name:’dianjier‘,
           path:’/home‘,
           component:HoMe,
           //二级路由
           children:[
               {
               name:’dianjisan‘,
                   //二级路由HTML路径值不要加/
               path:“news”,
               component:NeWer,
               //若要在配置对象中添加数据(必须使用meta才可以) 这里指判断是否要开启判断权限
               meta:{isfors:true}
               },
               {
                   name:’dianjisi‘,
                   path:“message”,
                   component:MessaGe,
                   meta:{isfors:true},
                   //独享前置守卫，只有一个，没有后置守卫，独享前置守卫是   beforeEnter:() {} 同全局前置守卫类似，参数及含义相同，这里只是单一的，并且
                   //需要在配置对象中去编写
                   beforeEnter:(to,from,next)=>{
                       console.log(’独享路由守卫,初识化了‘)
                       // next()
                       //动态决定是否放行
                       //从本地存储中获取数据，查看有没有学校school是等于atguigu的，若有则展示，没有则不展示
                       // if(localStorage.getItem(’school‘)===’atguigu‘){
                       // next()
                       // }
                       //根据路径、name姓名等去判断
                       //若要在配置对象中添加数据(必须使用meta:{}才可以)
                       // if(to.path===“/home/news” || to.path===“/home/message”){
                           if(to.meta.isfors){
                           //根据学校去判断是否满足条件，不满足则弹窗
                           if(localStorage.getItem(’school‘)===’atguigu‘){
                               next()
                           }else{
                               alert(’学校名不对，无权查看！‘)
                           }
                       }else{
                           //若以上都不满足，只满足第一个那么就给定展示第一个页面
                           next()
                       }
                   },
                   children:[
                       {
                       name:’dianjiwu‘,
                       path:“detil”,
                       component:DetAil,
                       }
                   ]
               }
           ]
       }
   ]
})

//全局前置路由守卫—初始化的时候被调用，每一次路由切换之前被调用,这里有三个参数
//第一个参数是去哪，第二个参数是从哪里来，第三个参数是下一步(放行),没有第三个参数则不能展示页面
router.beforeEach((to,from,next)=>{
   console.log(’前置路由守卫,初识化了‘)
   // next()
   //动态决定是否放行
   //从本地存储中获取数据，查看有没有学校school是等于atguigu的，若有则展示，没有则不展示
   // if(localStorage.getItem(’school‘)===’atguigu‘){
   // next()
   // }
   //根据路径、name姓名等去判断
   //若要在配置对象中添加数据(必须使用meta:{}才可以)
   // if(to.path===“/home/news” || to.path===“/home/message”){
       if(to.meta.isfors){
       //根据学校去判断是否满足条件，不满足则弹窗
       if(localStorage.getItem(’school‘)===’atguigu‘){
           next()
       }else{
           alert(’学校名不对，无权查看！‘)
       }
   }else{
       //若以上都不满足，只满足第一个那么就给定展示第一个页面
       next()
   }
})

//全局后置路由守卫—初始化的时候被调用，每一次路由切换之前被调用,这里有三个参数
//第一个参数是去哪，第二个参数是从哪里来，第三个参数是下一步(放行),没有第三个参数则不能展示页面
//后置守卫没有next next打印出来显示undefined
router.afterEach((to,from)=>{
   console.log(’后置路由守卫‘,to,from);

})
export default router