在开发 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 对象。
// www.javascriptcn.com code example
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
// ...
]
})
// 全局前置守卫
router.beforeEach((to, from, next) => {
// ...
next()
})
// 全局解析守卫
router.beforeResolve((to, from, next) => {
// ...
next()
})
// 全局后置守卫
router.afterEach((to, from) => {
// ...
})在以上代码中，我们分别定义了全局前置守卫、全局解析守卫和全局后置守卫。这些守卫可以帮助我们实现各种功能，比如页面权限控制、页面访问记录等。我们可以根据具体的需求进行相应的使用。
局部守卫
局部守卫是在定义路由时进行定义的。我们将在 router/index.js 中进行相应的配置。
// www.javascriptcn.com code example
const router = new VueRouter({
routes: [
{
path: '/',
name: 'home',
component: () => import('../views/Home.vue')
},
{
path: '/about',
name: 'about',
component: () => import('../views/About.vue'),
beforeEnter: (to, from, next) => {
// ...
next()
}
}
]
})在以上代码中，我们定义了两个路由：/ 和 /about。其中，/ 对应的是 Home.vue 组件，而 /about 对应的是 About.vue 组件。在 /about 对应的路由中，我们还定义了 beforeEnter 守卫。这个守卫只在进入 /about 页面时触发，在其他页面不会触发。
示例代码
下面，我们来看一个具体的示例代码。这个示例实现了两个页面之间的登录管理。
// www.javascriptcn.com code example
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: '/login',
name: 'login',
component: () => import('../views/Login.vue')
},
{
path: '/',
name: 'home',
component: () => import('../views/Home.vue'),
meta: {
requireAuth: true
}
}
]
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requireAuth)) {
// 判断该页面是否需要登录
if (!localStorage.getItem('token')) {
// 判断用户是否已经登录
next({
name: 'login',
query: {
redirect: to.fullPath
}
})
} else {
next()
}
} else {
next()
}
})
export default router在上述代码中，我们定义了两个路由：/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