什么是路由守卫？

路由守卫就是路由跳转的一些验证，比如登录鉴权（没有登录不能进入个人中心页）等等等

路由守卫分为三大类：

1. 全局守卫：前置守卫：beforeEach 后置钩子：afterEach

2. 单个路由守卫：独享守卫：beforeEnter

3. 组件内部守卫：beforeRouteEnter beforeRouteUpdate beforeRouteLeave

所有的路由守卫都是三个参数：

to：要进入的目标路由（去哪儿）

from：要离开的路由（从哪来）

next：是否进行下一步（要不要继续）

=======

写next()相当于 next(true) 继续执行

不写相当于next(false)终止执行

next(path)跳转例如：next("/login")

注意：后置钩子afterEach没有next参数

我们来详细看看都是怎么使用的叭

全局守卫：

1、全局前置守卫beforEach：

给需要守卫的路由加上： meta: { permission: true },

router.beforeEach((to, from, next) => {if (to.meta.permission) {if (sessionStorage.getItem("token")) {next();} else {alert("请先登录");next("/login");}} else {next();}
});

2、全局后置钩子afterEach（少用）

router.afterEach((to, from) => {// to and from are both route objects.
});

单个路由守卫：

  // 首页模块路由{path: "/index",name: "index",meta: { permission: true },component: () => import("../views/Index.vue"),beforeEnter: function(to, from, next) {if (sessionStorage.getItem("token")) {next();} else {alert("请先登录");next("/login");}}},

组件内部守卫：

和data、created、mounted、methods处于平等关系

用beforeRouteEnter举例说明：

  beforeRouteEnter(to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不！能！获取组件实例 `this`// 因为当守卫执行前，组件实例还没被创建if (sessionStorage.getItem("token")) {next();} else {alert("请先登录");next("/login");}},beforeRouteUpdate(to, from, next) {// 在当前路由改变，但是该组件被复用时调用// 可以访问组件实例 `this`},beforeRouteLeave(to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`},

beforeRouteEnter 是进入前

beforeRouteUpdate 是路由变化时

beforeRouteLeave 是离开后。这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

注意：
beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。

完整的导航解析流程

导航被触发。
在失活的组件里调用 beforeRouteLeave 守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

配合官网了解一下

https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

路由守卫-最全没有之一（亲测）相关推荐

服务器进tp5项目报nginx404错误,TP5框架在nginx环境下路由报404错误解决方法亲测可用...
前段时间给客户写了个TP5框架的后台,主要是API调用,上传到客户服务器后发现首页可用,但所有内页报404错误,网上一搜发现天多一样的问题,但找了很多都是不可用的,而且都是过时的,但最终还是自己试出来 ...
【钉钉直播回放下载最全教程，亲测可用！！！】
相信大家看到重要的钉钉直播时,出于好学的本能,并且直播回放只能看12个月,希望能够保存在自己的电脑中.但是由于钉钉直播默认设置了权限,导致直播不能直接下载,那么应该如何下载呢?大家不要急,希望通过看完 ...
Python+Django+Nginx+Uwsgi（史上最全步骤）(亲测)
步骤: Python安装第一步安装Python (很多购买的服务器linux系统中自带python2和python3,我是直接使用自带的python3.5版本的) 如果系统中没有,则自己安装,如下: ...
详解centos7 YCM YouCompleteMe自动补全安装，亲测成功
文章经重新排版转移至以下链接 https://blog.csdn.net/csdn_kou/article/details/84633663
彻底关闭华为系统更新教程，也可以激活系统更新，最全教程，亲测
华为P40Pro手机为例,自动出了鸿蒙系统,问题是源源不断,网络不稳定,系统不流畅,APP闪退,等等一系列问题,还是原先得EMUI 11.0.0系统好用,可是我用华为助手降级之后,还是不行,自动给你更 ...
centos7虚拟机静态ip设置详细教程(超全超详细亲测有效)
目录为什么要设置静态ip: 第一步:获取配置静态ip需要知道的信息第二步:修改配置文件第三步:重启网络为什么要设置静态ip: 设置静态ip的必要性:一般我们的虚拟机默认使用的是dhcp协议(根 ...
海康威视py和c++调用全（超精髓，亲测）
海康威视py和c++调用全(超精髓,亲测) 前言一.海康威视需要的SDK 二.海康威视常见报错三.python调用海康威视摄像头解析代码: 四.c++调用海康威视找通道数以及设备数 c++调用海 ...
最新视频打赏系统全开源+附教程/亲测可用
正文: 最新视频打赏系统全开源+附教程/亲测,这套系统是我从别人那里拿到的,100%完整可用,今天测试防红失效了,需要修改防红API即可,程序仅供研究学习使用. 程序: lanzou.com/iSFj ...
2022最新视频打赏系统全开源版本+附教程/亲测可用
正文: 最新视频打赏系统全开源+附教程/亲测,这套系统是我从别人那里拿到的,100%完整可用,今天测试防红失效了,需要修改防红API即可,程序仅供研究学习使用. 程序的全部演示图放到压缩包了,有兴趣的 ...

路由守卫-最全没有之一（亲测）