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

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

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

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

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

下方是内路由守卫：

 添加next（）

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/24713.html