VueRouter——导航守卫拦截（六）

前言：本文是使用导航守卫和路由元信息编写的demo。目的是拦截和查询。本文涉及的知识在之前和之前的文章中都有详细说明。如果你对某些知识不是很熟悉，可以借鉴前面的章节，或者给我留言。源码地址：https://github.com/coder-Wang...克隆时切换到分支6.导航守卫拦截，具体操作：gitclone-b6.导航守卫拦截https://github.com/coder-王宇/vue-test-code.git1。先看效果1.1访问控制1.2登录1.3访问需要权限页面1.4留下查询2.源码解读其实很简单，这里说几个重点。router.js:路由配置:{path:'/about',component:()=>import("../components/about.vue"),meta:{requestFlag:false,leaveFlag:true,},},{path:'/hy',组件:()=>import("../components/hy.vue"),redirect:'/hy/jd',children:[{path:'jd',组件:()=>import("../components/hy/jd.vue"),meta:{requestFlag:true,},},],meta:{requestFlag:true,},},{path:'/login',组件:()=>import("../components/login.vue")},全局守卫:router.beforeEach((to,from,next)=>{lethaveFlag=to.matched.some(item=>item.meta.requestFlag)if(haveFlag){document.cookie.includes('=')?next():window.confirm("您需要登录才能浏览，您登录了吗？")?next('/login'):next(false)}else{next()}})login.vue：about.vue：首先，在router.js中，使用全局的守卫拦截，可以减少代码的冗余。虽然组件内的守卫和独占的路由守卫也可以达到这种效果，但是同样的代码会出现很多次。所以globalguard是最合适的。其次，在嵌套路由中设置meta时，需要为其子路由设置meta；因为如果你只在父路由中设置meta，你也可以在地址栏中自由输入子路由的路径。在读写cookies的时候，一般都是后台完成的。为了达到效果，就像代码中所示的操作一样。请不要学我！！！后记：关于路由，预计再写两章就完结了。希望我的VueRouter里面的内容还是充实的，也希望能对阅读这些文章的朋友有所帮助。最后，如果文章或源码有什么问题，请及时留言，互相帮助才能不断进步！谢谢各位评委~~~继续傻，继续饿。