vue之路由钩子函数-路由守卫
发布网友
发布时间：2022-11-08 22:28
我来回答
共1个回答
热心网友
时间：2023-01-23 16:34
1、vue router.beforeEach（全局前置守卫）
beforeEach的钩子函数，它是一个全局的before 钩子函数， （before each）意思是在 每次每一个路由改变的时候都得执行一遍。
它的三个参数：
to: (Route路由对象) 即将要进入的目标 路由对象 to对象下面的属性： path params query hash fullPath matched name meta（在matched下，但是本例可以直接用）
from: (Route路由对象) 当前导航正要离开的路由
next: (Function函数) 一定要调用该方法来 resolve 这个钩子。 调用方法：next(参数或者空) ***必须调用
next(无参数的时候): 进行管道中的下一个钩子，如果走到最后一个钩子函数，那么 导航的状态就是 confirmed （确认的）
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
2、vue router.afterEach（全局后置守卫）
router.beforeEach 是页面加载之前，相反router.afterEach是页面加载之后
你可以在路由配置上直接定义 beforeEnter 守卫：
这些守卫与全局前置守卫的方法参数是一样的。
(一) 清除当前组件中的定时器
当一个组件中有一个定时器时, 在路由进行切换的时候, 可使用beforeRouteLeave将定时器进行清楚, 以免占用内存:
(二) 当页面中有未关闭的窗口, 或未保存的内容时, 阻止页面跳转
如果页面内有重要的信息需要用户保存后才能进行跳转, 或者有弹出框的情况. 应该阻止用户跳转，结合vuex状态管理（dialogVisibility是否有保存）
(三) 保存相关内容到Vuex中或Session中
当用户需要关闭页面时, 可以将公用的信息保存到session或Vuex中
