在 Vue 的单页应用（SPA）开发中，路由管理是一项重要的任务。除了控制页面切换和锚点定位，我们还需要保证应用的安全性和用户体验。这时候就需要用到路由守卫了。本文将详细介绍 Vue SPA 应用中的路由守卫的使用方法，并提供示例代码供大家参考。
路由守卫是什么？
路由守卫在 Vue 中是一个函数数组，它包含在路由跳转过程中执行的一系列钩子函数，用于控制页面的进入、离开和重定向。这些钩子函数可以让我们实现一些有用的功能，如：
- 权限控制：根据用户角色或权限等级，动态决定是否允许访问某些页面；
- 页面缓存：在页面切换时，判断是否需要缓存页面，并在需要时加载缓存内容；
- 数据预取：在页面切换前预取一些数据，以提高用户体验和页面展示速度等；
还有其他很多应用场景，不过本文重点介绍以下几种路由守卫的用法。
全局守卫
全局守卫是在整个应用切换路由时都会触发的钩子函数。在 Vue 中，我们可以通过 router.beforeEach(fn) 来注册全局守卫。这个函数需要接收三个参数：
- to：即将要进入的目标路由对象；
- from：当前导航正要离开的路由对象；
- next：继续执行的方法，必须调用该方法才能进行后续步骤。
下面是一个简单的权限控制示例。我们假设有两个页面，一个是用户信息页，一个是管理员信息页。当用户尝试访问管理员信息页时，需要验证用户是否有管理员权限，如果没有，则跳转到用户信息页。
router.beforeEach((to, from, next) => {
if (to.path === '/admin' && !user.isAdmin) {
next('/user');
} else {
next();
}
})路由独享守卫
路由独享守卫是在单个路由切换时触发的钩子函数。也就是说，同一个应用中不同的路由可以有不同的路由守卫。我们可以在路由配置时通过 beforeEnter 属性来定义路由独享守卫函数。
-- -------------------- ---- -------
----- ------ - --- -----------
------- -
-
----- --------
---------- -----
----- - ------------- ---- -- -- -----------
------------ ---- ----- ----- -- -
-- ------------------ - -- ----
---------------
- ---- -
-------
-
-
--
-
----- ---------
---------- -----
-
-
--在上面的例子中，我们通过 beforeEnter 定义了一个路由独享守卫函数。该函数判断用户是否已经认证，如果没有，则跳转到登录页面。
组件内守卫
组件内守卫是在组件内部定义的路由钩子函数，用来控制在当前组件内切换路由时的行为。我们可以在组件内部声明 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 等三个路由守卫函数。
-- -------------------- ---- -------
----- ---- - -
--------- ---------- ---------------
-------------------- ----- ----- -
------------------- ----- --------
-------
--
--------------------- ----- ----- -
------------------- ----- ---------
-------
--
-------------------- ----- ----- -
------------------- ----- --------
-------
-
-上面的例子中，我们在 User 组件内部定义了三个路由守卫函数。当切换路由进入当前组件时，会触发 beforeRouteEnter 函数。当更新当前组件的路由参数时，会触发 beforeRouteUpdate 函数。当离开当前组件去访问其他路由时，会触发 beforeRouteLeave 函数。
总结
本文介绍了 Vue SPA 应用中的路由守卫的用法，包括全局守卫、路由独享守卫和组件内守卫等三种。这些路由钩子函数可以帮助我们实现很多有用的功能，如权限控制、页面缓存和数据预取等。在实际项目中，我们可以根据需求灵活使用这些路由守卫函数，以提高应用的安全性和用户体验。
示例代码：https://codesandbox.io/s/xenodochial-hertz-1i2zb
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6488004c48841e9894683062