在构建复杂的单页面应用程序（SPA）时，我们经常需要在用户导航到不同的路由之前执行一些操作。这些操作可能包括身份验证检查、权限验证、数据预加载等。Vue Router 提供了多种类型的路由守卫来帮助我们实现这些需求。
全局前置守卫
全局前置守卫是最常用的守卫之一，它会在导航触发时被调用。你可以使用 beforeEach 方法注册一个全局前置守卫：
-- -------------------- ---- -------
---------------------- ----- ----- -- -
-- -- - ---- -- ----- ------------------------------
-- ---- --------------------------
-- -----------
-- --------------------- -- ------------------- -
---------------
- ---- -
-------
-
---在这个例子中，我们检查目标路由是否需要身份验证。如果需要但用户未登录，则将用户重定向到登录页面；否则，允许导航继续。
全局解析守卫
全局解析守卫用于在导航被确认之前，对异步路由组件进行预取或预加载数据。使用 beforeResolve 方法可以注册这样的守卫：
-- -------------------- ---- -------
-------------------------- ---- ----- ----- -- -
-- --------------------
--- -
----- -------- - ----- --------------------------------------
---------------- - ---------
-------
- ----- ------- -
------ ----- --------- ------ - -------- ------- -- ---- ---- ------ - ---
-
---这个守卫确保在导航被确认之前完成所有必要的数据加载。
全局后置守卫
与前置守卫不同，全局后置守卫不会接受 next 函数，也不会改变导航本身，而是在导航完成后执行。这通常用于记录日志或其他不干涉导航流程的操作：
router.afterEach((to, from) => {
console.log(`Navigated from ${from.path} to ${to.path}`);
});这个简单的例子展示了如何在每次导航后记录一条日志。
路由独享的守卫
除了全局守卫外，你还可以为特定的路由定义自己的守卫。这些守卫仅在匹配该特定路由时才会被调用：
路由独享的前置守卫
-- -------------------- ---- -------
-
----- -----------
---------- --------
------------ ---- ----- ----- -- -
-- --- -------- --------
-- --------------- -
----------------------
- ---- -
-------
-
-
-组件内的守卫
你也可以在组件内部定义路由守卫，如 beforeRouteEnter, beforeRouteUpdate, 和 beforeRouteLeave。这些守卫方法提供了访问组件实例的能力，因为它们只能在组件实例创建之后被调用：
-- -------------------- ---- -------
------ ------- -
----- ----------
-------------------- ----- ----- -
-- ------------ ------- ---
------- -- -
-----------------
---
--
--------------------- ----- ----- -
-- -------------------
-------------------
-------
--
-------------------- ----- ----- -
-- ---------------
----- ------ - ------------------ --- ------ ---- -- ------ --- ---- ------- -----------
-- -------- -
-------
- ---- -
------------
-
--
-------- -
---------------- -
-- --------
-
-
--以上就是在 Vue3 中使用路由守卫的基本介绍。通过合理利用这些守卫，我们可以有效地控制应用的行为，并提供更好的用户体验。