在开发 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 字段。这样，用户就可以正常进行登录操作了。
通过这个代码示例，我们可以了解到路由守卫的应用场景和使用方法。路由守卫可以帮助我们实现各种功能，比如页面权限控制、页面访问记录等。在实际开发中，我们可以根据具体的需求和场景进行相应的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d8052aa941bf7134e4de05
