- A+
什么是路由守卫？
路由守卫就是路由跳转的一些验证，比如登录鉴权（没有登录不能进入个人中心页）等等等
路由守卫分为三大类：
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 的回调函数，创建好的组件实例会作为回调函数的参数传入。
