写在前面
Vue Router 提供了多种导航守卫（Navigation Guards），用于在路由跳转前后执行一些逻辑。这些守卫可以帮助你控制用户的导航行为，例如验证用户权限、加载数据等。下面针对 Vue Router 导航守卫的使用做一下介绍。
全局守卫
全局守卫在所有路由跳转前后生效。Vue Router 提供了以下几种全局守卫：
- beforeEach：在路由跳转之前调用。
- beforeResolve：在路由跳转解析完成之后，但在导航确认之前调用。
- afterEach：在路由跳转完成后调用。
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [
{
path: '/',
component: Home,
beforeEnter: (to, from, next) => {
console.log('Home 路由独享守卫', to, from);
// 进行特定于 Home 路由的操作
next();
},
},
{
path: '/about',
component: About,
beforeEnter: (to, from, next) => {
console.log('About 路由独享守卫', to, from);
// 进行特定于 About 路由的操作
next();
},
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
单个路由独享的守卫
你可以在路由配置中为特定路由定义独享的守卫。这些守卫仅在该路由跳转前后生效。
import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [
{
path: '/',
component: Home,
beforeEnter: (to, from, next) => {
console.log('Home 路由独享守卫', to, from);
// 进行特定于 Home 路由的操作
next();
},
},
{
path: '/about',
component: About,
beforeEnter: (to, from, next) => {
console.log('About 路由独享守卫', to, from);
// 进行特定于 About 路由的操作
next();
},
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
组件内的守卫
你可以在组件内定义守卫，这些守卫仅在该组件的路由跳转前后生效。Vue Router 提供了以下几种组件内守卫：
- beforeRouteEnter：在路由进入前调用。
- beforeRouteUpdate：在路由参数变化时调用。
- beforeRouteLeave：在路由离开前调用。
<template>
<div>
<h1>About Page</h1>
</div>
</template>
<script>
export default {
name: 'About',
beforeRouteEnter(to, from, next) {
console.log('About 组件内前置守卫', to, from);
// 进行特定于 About 组件的操作
next();
},
beforeRouteUpdate(to, from, next) {
console.log('About 组件内更新守卫', to, from);
// 处理路由参数变化
next();
},
beforeRouteLeave(to, from, next) {
console.log('About 组件内离开守卫', to, from);
// 确认用户是否要离开
const answer = window.confirm('Do you really want to leave? you have unsaved changes!');
if (answer) {
next();
} else {
next(false);
}
},
};
</script>
<style scoped></style>
总结
全局守卫：
beforeEach：在每次路由跳转之前调用，可以用于权限验证、用户登录状态检查等。beforeResolve：在路由跳转解析完成之后，但在导航确认之前调用，可以用于数据预加载。afterEach：在每次路由跳转完成后调用，可以用于页面标题设置、日志记录等。
单个路由独享的守卫：
beforeEnter：在特定路由跳转前后生效，可以用于特定路由的权限验证或数据加载。
组件内的守卫：
beforeRouteEnter：在组件实例被创建之前调用，不能访问this，但可以通过next(vm => {})访问组件实例。beforeRouteUpdate：在路由参数变化时调用，可以用于处理动态路由参数的变化。beforeRouteLeave：在路由离开前调用，可以用于确认用户是否要离开当前页面。
通过使用 Vue Router 的导航守卫，你可以在路由跳转前后执行各种逻辑，从而更好地控制用户的导航行为。这些守卫提供了强大的灵活性和控制能力，帮助你构建更复杂和功能丰富的应用。
