【精讲】vue框架 路由守卫（前后置）等

第一部分：前置，后置，独享前置案例

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

//该文件专门用于创建整个路由
import VueRouter from 'vue-router'
//引入组件
import AboUt from '../pages/AbouT'
import HoMe from '../pages/HoMe'
import NeWer from '../pages/NeWer'
import MessaGe from '../pages/MessaGe'
import DetAil from '../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

组件内路守卫：（在组件中编写）

 1，通过路由规则，进入组件时被调用

,2，通过路由规则，离开组件时被调用

 

 

 在使用路由守卫时，必须要在index.js文件中添加meta:{ }

下方是内路由守卫：

 

 

 添加next（）