在 Vue.js 中，路由守卫是我们常常需要使用的功能，它可以在路由导航过程中对路由进行拦截或者修改。
在单页应用（SPA）中，通过路由守卫可以实现登录验证、权限控制、页面访问统计等功能，是一个非常重要的特性。
本文我们将介绍如何在 Vue.js SPA 中实现路由守卫，并且通过实例代码来详细探讨它的实现方式。
Vue.js 中的路由守卫
在 Vue.js 中，路由守卫主要有以下几个分类：
- 全局前置守卫：在路由导航开始前被调用，常用于登录验证和路由拦截；
- 全局解析守卫：在路由导航被确认之前和异步组件被解析之后被调用；
- 全局后置钩子：在路由导航完成之后被调用，常用于路由访问统计和页面滚动行为控制；
- 路由独享守卫：在路由配置中定义的守卫，只作用于当前路由。
实现路由守卫的方法
全局前置守卫
全局前置守卫可以在路由导航开始前对路由进行拦截或者修改。
-- -------------------- ---- -------
----- ------ - --- -----------
------- ------
---
---------------------- ----- ----- -- -
-- ---------------------- -
-- ----------------------- -
-------
- ---- -
------
----- ---------
------ -
--------- ------------
--
---
-
- ---- -
-------
-
---在代码中，我们通过 router.beforeEach 方法来定义全局前置守卫，这里我们以登录验证为例，如果访问的路由需要登录验证，那么我们就需要进行登录验证，如果已经登录，则继续执行路由导航，否则跳转到登录页面。
全局后置钩子
全局后置钩子可以在路由导航完成后对路由进行拦截或者修改。
const router = new VueRouter({
routes: [...],
});
router.afterEach((to, from) => {
console.log(`访问了${to.path}页面`);
});在代码中，我们通过 router.afterEach 方法来定义全局后置钩子，在路由导航完成后，可以对路由进行统计和记录等操作。
路由独享守卫
路由独享守卫可以在路由配置中定义，只作用于当前路由。
-- -------------------- ---- -------
----- ------ - --- -----------
------- -
-
----- ---------
---------- -----------
------------ ---- ----- ----- -- -
-- ---------------------- -- ---------------------- -
-------
- ---- -
----------
-
--
--
--
---在代码中，我们通过在路由配置中定义 beforeEnter 方法来实现路由独享守卫，这里我们以管理员权限控制为例，如果访问的是管理员界面，那么我们需要进行权限验证，如果有管理员权限，则继续访问，否则跳转到首页。
示例代码
以下是一个示例代码，展示了如何在 Vue.js SPA 中实现路由守卫。
-- -------------------- ---- -------
----------
-----
------------ -----------------------
------------ ----------------------------
------------ ----------------------------
---------------------------
------
-----------
--------
------ ----- ---- ----------
------ ---------- ---- ------------------------------
------ ------- -
----- ------
----------- -
-----------
--
--------- -
------------
--
-------- -
------ -
-----------------
------------------
--
----------- -
-- ------------------------ -
--------------------- ------
-
--
------------ -
----- ------ - -------------
---------------------- ----- ----- -- -
-- ---------------------- -
-- ----------------------- -
-------
- ---- -
------
----- ---------
------ -
--------- ------------
--
---
-
- ---- -
-------
-
---
--------------------- ----- -- -
-------------------------------
---
--
--
--
---------在代码中，我们在 mounted 中调用了 init 方法，这个方法中做了登录验证和初始化路由，其中登录验证通过 store 实现，路由初始化采用全局前置守卫和全局后置钩子来实现。
在路由配置中，我们对管理员界面进行了路由独享守卫，只有登录并且拥有管理员权限的用户才可以访问。
-- -------------------- ---- -------
----- ------ - --- -----------
------- -
-
----- ---------
---------- -----------
------------ ---- ----- ----- -- -
-- ---------------------- -- ---------------------- -
-------
- ---- -
----------
-
--
--
-
----- ---------
---------- ------
----- -
------------- -----
--
--
-
----- ----
---------- -----
--
--
---总结
本文介绍了如何在 Vue.js SPA 中实现路由守卫，并通过实例代码来详细探讨了它的实现方式。
通过路由守卫，我们可以实现一些重要的功能，比如登录验证、权限控制和访问统计等。
在开发过程中，我们需要根据实际需求选择不同的路由守卫，以达到最优的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e94de8f6b2d6eab34a1586