在开发 Vue.js 单页面应用时，路由是非常重要的一个概念。路由可以帮助我们实现页面之间的跳转，并且还可以实现页面之间的数据传递和状态管理。在这些功能的基础上，我们还可以通过路由守卫来对页面进行更精细的控制。
路由守卫是 Vue.js 提供的一个功能，它可以帮助我们在路由跳转时进行判断和处理。通过路由守卫，我们可以实现页面的权限管理、页面访问记录、页面参数校验等功能。在本文中，我们将介绍路由守卫的详细使用。
路由守卫的分类
Vue.js 的路由守卫可以分为全局守卫和局部守卫两种。
全局守卫
全局守卫是指在整个应用的生命周期中，每一个路由跳转都会触发的守卫。全局守卫的有以下三种：
beforeEach(to, from, next)：每个路由跳转前都会触发该守卫。beforeResolve(to, from, next)：在组件内加载异步路由之前触发该守卫。afterEach(to, from)：每个路由跳转后都会触发该守卫。
局部守卫
局部守卫是指只在特定的路由跳转时触发的守卫。局部守卫的有以下两种：
beforeEnter(to, from, next)：在进入某个路由前触发该守卫。- 组件内的
beforeRouteUpdate(to, from, next)和beforeRouteLeave(to, from, next)两个守卫分别在组件实例更新前和离开前触发。
具体使用方法
全局守卫
全局守卫可以在 router/index.js 文件中定义。在定义之前，我们需要先引入 router 对象。
-- -------------------- ---- -------
------ --- ---- -----
------ --------- ---- ------------
------------------
----- ------ - --- -----------
------- -
-- ---
-
--
-- ------
---------------------- ----- ----- -- -
-- ---
------
--
-- ------
------------------------- ----- ----- -- -
-- ---
------
--
-- ------
--------------------- ----- -- -
-- ---
--在以上代码中，我们分别定义了全局前置守卫、全局解析守卫和全局后置守卫。这些守卫可以帮助我们实现各种功能，比如页面权限控制、页面访问记录等。我们可以根据具体的需求进行相应的使用。
局部守卫
局部守卫是在定义路由时进行定义的。我们将在 router/index.js 中进行相应的配置。
-- -------------------- ---- -------
----- ------ - --- -----------
------- -
-
----- ----
----- -------
---------- -- -- ---------------------------
--
-
----- ---------
----- --------
---------- -- -- -----------------------------
------------ ---- ----- ----- -- -
-- ---
------
-
-
-
--在以上代码中，我们定义了两个路由：/ 和 /about。其中，/ 对应的是 Home.vue 组件，而 /about 对应的是 About.vue 组件。在 /about 对应的路由中，我们还定义了 beforeEnter 守卫。这个守卫只在进入 /about 页面时触发，在其他页面不会触发。
示例代码
下面，我们来看一个具体的示例代码。这个示例实现了两个页面之间的登录管理。
-- -------------------- ---- -------
------ --- ---- -----
------ --------- ---- ------------
------------------
----- ------ - --- -----------
------- -
-
----- ---------
----- --------
---------- -- -- ----------------------------
--
-
----- ----
----- -------
---------- -- -- ----------------------------
----- -
------------ ----
-
-
-
--
---------------------- ----- ----- -- -
-- ----------------------- -- ------------------------- -
-- -----------
-- -------------------------------- -
-- ----------
------
----- --------
------ -
--------- -----------
-
--
- ---- -
------
-
- ---- -
------
-
--
------ ------- ------在上述代码中，我们定义了两个路由：/login 和 /。其中，/login 对应的是 Login.vue 组件，/ 对应的是 Home.vue 组件。我们为 / 路由增加了 meta.requireAuth 这个字段，表示该页面需要登录。
在全局前置守卫中，我们首先判断该页面是否需要登录，如果是则判断用户是否已经登录。如果用户未登录，则跳转到 /login 页面。我们还增加了一个 query.redirect 字段，表示用户在登录之后需要重定向到的页面。如果用户已经登录，则继续进行下一步操作。
在 Login.vue 组件中，我们实现了用户的登录功能。登录成功之后，将会在 localStorage 中设置一个 token 字段。这个字段在用户退出登录时需要清除。
在 Home.vue 组件中，我们实现了用户的退出登录功能。在退出登录时，清空 localStorage 中的 token 字段。这样，用户就可以正常进行登录操作了。
通过这个代码示例，我们可以了解到路由守卫的应用场景和使用方法。路由守卫可以帮助我们实现各种功能，比如页面权限控制、页面访问记录等。在实际开发中，我们可以根据具体的需求和场景进行相应的使用。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d8052aa941bf7134e4de05