在 Vue.js 中，路由是一个非常重要的概念，它可以帮助我们实现 SPA（Single Page Application）应用，使用户能够在不刷新页面的情况下访问不同的页面。而路由守卫则是 Vue 路由中的一个非常重要的功能，可以在用户访问指定页面时进行拦截和控制，以达到我们想要的业务目的。
路由守卫的作用
在实际项目开发中，经常遇到如下情况：
- 需要用户登录后才能访问某些页面；
- 检查页面权限，只有满足某些条件的用户才能访问；
- 统计页面访问次数、记录访问日志等。
以上这些情况都可以通过使用 Vue 路由中的路由守卫来实现。路由守卫可以在用户访问某个路由时，根据不同的条件进行拦截和处理。通过路由守卫，我们可以方便地控制用户的访问权限，实现一些常见的业务需求。
Vue 路由的 3 种路由守卫
Vue 路由提供了 3 种不同的路由守卫：
- 全局前置守卫：beforeEach
- 全局后置守卫：afterEach
- 路由独享守卫：beforeEnter
全局前置守卫
全局前置守卫可以拦截所有的路由请求，并在跳转路由之前进行处理。
-- -------------------- ---- -------
---------------------- ----- ----- -- -
-- ----------
-- --------------------- -- ----------- -
-- ----------------------------
------
----- ---------
------ - --------- ----------- - -- --------------------
--
- ---- -
-- -----------
------
-
--全局后置守卫
全局后置守卫可以在路由跳转之后进行一些操作，例如统计页面访问次数、记录访问日志等操作。
router.afterEach((to, from) => {
// 统计页面访问次数
countPageView()
})路由独享守卫
路由独享守卫可以在单个路由中实现特定的拦截和处理。
-- -------------------- ---- -------
-
----- -------------
---------- ----------
------------ ---- ----- ----- -- -
-- --------------
-- ----------------------------------- -
-- -----------
------
- ---- -
-- ---------
--------------
-
-
-示例代码
下面是一个完整的示例代码，用于演示如何使用 Vue 路由中的路由守卫来实现用户登录验证和页面访问权限控制的功能。
-- -------------------- ---- -------
------ --- ---- -----
------ ------ ---- ------------
------ ---- ---- ------------------
------ ----- ---- -------------------
------ --------- ---- -----------------------
------ ----- ---- -------------------
---------------
----- ------ - --- --------
------- -
-
----- ----
----- -------
---------- ----
--
-
----- ---------
----- --------
---------- -----
--
-
----- -------------
----- ------------
---------- ----------
----- -
------------- ----- -- -----------
----------- ----------- -- ------- --------- ------
--
------------ ---- ----- ----- -- -
-- --------------
-- ----------------------------------- -
-- -----------
------
- ---- -
-- ---------
--------------
-
-
--
-
----- ---------
----- --------
---------- -----
-
-
--
-- ----------
-------- --------- -
------ -----------------------------
-
-- --------------
-------- ------------------------- -
----- ---- - ----------------------------
------ ---- -- ----------------------------------- --- --
-
-- ------
---------------------- ----- ----- -- -
-- ----------
-- --------------------- -- ----------- -
-- ----------------------------
------
----- ---------
------ - --------- ----------- - -- --------------------
--
- ---- -
-- -----------
------
-
--
-- ------
--------------------- ----- -- -
-- --------
---------------
--
------ ------- ------总结
路由守卫是 Vue 路由中非常重要的一个功能，可以帮助我们实现用户登录、页面访问权限控制、页面访问统计等功能。在实际项目开发中，掌握并使用好路由守卫将会大大提高我们的开发效率和应用的可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b3cfd968c7c53b0d97574