导航守卫其实也是路由守卫，也可以是路由拦截，我们可以通过路由拦截，来判断用户是否登录，该页面用户是否有权限浏览，需要结合meta来实现

vue中路由守卫一共有三种：一个全局路由守卫，一个是组件内路由守卫，一个是router独享守卫

所谓的路由守卫可以简单的理解为一座房子的门口的保安，想要进入这个房子就必须通过保安的检查，要告诉路由守卫你从哪里来？总不能随便陌生人就给放进去？要到哪里去？然后保安再告诉你下一步该怎么做？如果你的确是这个房子主人允许进入的人，那就让你进入，否则就要打电话给房子主人，跟房主商量(登录注册)，给你权限。

下面展示一些 内联代码片。

// A code block
var foo = 'bar';

to.matched.some(res => res.meta.requireAuth)
// 通过这个匹配判断是否有该权限或要求 这个一般作为页面权限设置 比如哪些页面需要登录才能进入 哪些不需要

一、全局路由守卫

所谓全局路由守卫，就是小区大门，整个小区就这一个大门，你想要进入其中任何一个房子，都需要经过这个大门的检查
全局路由守卫有个两个：一个是全局前置守卫，一个是全局后置守卫

router.beforeEach((to, from, next) => {console.log(to) => // 到哪个页面去？console.log(from) => // 从哪个页面来？next() => // 一个回调函数
}
router.afterEach（to，from） = {}

next()：回调函数参数配置

next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL
地址会重置到 from 路由对应的地址
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用
在 router-link 的 to prop 或 router.push 中的选项

二、组件路由守卫

// 跟methods: {}等同级别书写，组件路由守卫是写在每个单独的vue文件里面的路由守卫
beforeRouteEnter (to, from, next) {// 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例next(vm => {})
}
beforeRouteUpdate (to, from, next) {// 同一页面，刷新不同数据时调用，
}
beforeRouteLeave (to, from, next) {// 离开当前路由页面时调用
}

三、路由独享守卫

export default new VueRouter({routes: [{path: '/',name: 'home',component: 'Home',beforeEnter: (to, from, next) => {// ...}}]
})

五分钟看懂vue路由守卫相关推荐

什么是嵌入式？你眼中的嵌入式是怎么样的？怎么学嵌入式？教你五分钟看懂嵌入式。
你眼中的嵌入式是怎么样的? 嵌入式的定义从技术上来区分嵌入式嵌入式硬件工程师必备技能嵌入式驱动工程师必备技能嵌入式软件开发工程师必备技能嵌入式系统开发工程师必备技能总结嵌入式的定义 IE ...
五分钟看懂抓包神技：DPDK
我是一个网络监控软件,我被开发出来的使命就是监控网络中进进出出的所有通信流量. 一直以来,我的工作都非常的出色,但是随着我监控的网络越来越庞大,网络中的通信流量也变得越来越多,我开始有些忙不过来了,逐 ...
漫画：五分钟看懂车联网
戳蓝字"CSDN云计算"关注我们哦! 福利扫描添加小编微信,备注"姓名+公司职位",加入[云计算学习交流群],和志同道合的朋友们共同打卡学习! 推荐阅读: 华 ...
的一致性哈希_五分钟看懂一致性哈希算法
作者简介: 华哥 10年+后端开发工作经验, 主要分享:关于java体系的知识,如:java基础知识/数据结算/算法,Spring/MyBatis/Netty源码分析,高并发/高性能/分布式/微服务架 ...
五分钟看懂同城小程序是什么，能做什么！
我们都知道,微信小程序是基于微信这样一个社交平台运行的轻应用,不需要用户下载任何软件,只需要有微信就能够直接使用,非常方便. 微趋道,就是小程序对于普通商家来说,小程序可谓是营销利器,开发成本低,运 ...
五分钟看懂python函数（同Java方法作比较）
今天来学习python函数,对于有java基础的我来说那岂不是手到擒来既然已经有java基础了,那么首先我想到的就是两个问题 python如何定义函数 python如何调用函数 python中如何定 ...
艾永亮：五分钟看懂什么是超级产品
在阐述如何打造超级产品之前,我希望大家能够明白,什么是产品? 据艾永亮超级产品的文章中所写,是这样定义产品的:产品是以解决用户问题为主,那么能够解决用户问题的,我们称之为产品,只是产品的形态多样化,它 ...
五分钟看懂第一波EOS超级节点投票大战
经过12天的磕磕绊绊,EOS主网总算是上线并正常运行. 这段时间,EOS从因安全问题上线时间出现分歧,到上线时遇上超级节点投票率不足,再到交易所助推投票进程,再到出现了私钥泄露.大量Token被盗取等 ...
五分钟看懂XLNet基本思想以及为什么它优于BERT
https://www.toutiao.com/a6707592689329635843/ 前几天刚刚发布的XLNet彻底火了,原因是它在20多项任务中超越了BERT.这是一个非常让人惊讶的结果.之前 ...
五分钟看懂UML类图与类的关系详解
在画类图的时候,理清类和类之间的关系是重点.类的关系有泛化(Generalization).实现(Realization).依赖(Dependency)和关联(Association).其中关联又分为 ...

五分钟看懂vue路由守卫

一、全局路由守卫

二、组件路由守卫

三、路由独享守卫

五分钟看懂vue路由守卫相关推荐

最新文章

热门文章