当前位置： 面试刷题>> Vue Router 的导航守卫有哪些？它们接受哪些参数？
在Vue.js应用中，Vue Router是管理单页面应用（SPA）路由的核心库。它提供了一套丰富的导航守卫（Navigation Guards）机制，允许我们在路由跳转的不同阶段插入自定义逻辑，比如权限校验、页面加载前的数据预取等。这些守卫可以分为全局守卫、路由独享守卫和组件内守卫三大类。下面，我将详细阐述这些守卫及其接受的参数，并附上示例代码。
### 1. 全局守卫
全局守卫作用于整个应用的所有路由。它们主要有以下几种：
- **beforeEach**：全局前置守卫，在路由即将改变前调用。
- **beforeResolve**：在解析守卫之后调用，即在所有组件内守卫和异步路由组件被解析之后调用。
- **afterEach**：全局后置守卫，在路由改变完成后调用，不接收next函数，也不会改变导航本身。
**示例代码**：
```javascript
router.beforeEach((to, from, next) => {
// 假设我们需要检查用户是否登录
if (to.matched.some(record => record.meta.requiresAuth)) {
// 这里是检查用户是否登录的逻辑
if (!isAuthenticated) {
next({
path: '/login',
query: { redirect: to.fullPath }
})
} else {
next()
}
} else {
next()
}
})
router.afterEach((to, from) => {
// 路由改变后执行的逻辑，如页面标题设置
document.title = to.meta.title || '默认标题';
})
```
### 2. 路由独享守卫
路由独享守卫仅对某个路由有效，在路由配置中直接定义。
**示例代码**：
```javascript
const routes = [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// 路由独享守卫逻辑
console.log('即将进入 Foo 组件');
next();
}
}
]
```
### 3. 组件内守卫
组件内守卫允许我们在路由组件内部直接定义守卫。
- **beforeRouteEnter**：在渲染该组件的对应路由被 confirm 前调用，不能获取组件实例 `this`。
- **beforeRouteUpdate** (2.2+)：在当前路由改变，但是该组件被复用时调用。
- **beforeRouteLeave**：导航离开该组件的对应路由时调用。
**示例代码**：
```vue
```
### 总结
Vue Router的导航守卫为开发者提供了强大的路由控制能力，无论是全局的、路由独享的还是组件内的守卫，都能在不同阶段插入自定义逻辑，以满足复杂的业务需求。通过合理利用这些守卫，可以构建出更加健壮、灵活的Vue.js应用。在开发过程中，建议根据实际需求选择合适的守卫类型，并编写清晰、可维护的守卫逻辑。同时，码小课网站提供了丰富的Vue.js学习资源，包括Vue Router的深入解析和实战案例，可以帮助开发者更好地掌握这一技术。