Vue 3 路由守卫详解与实战
在现代Web应用程序开发中，路由守卫是一个必不可少的功能。特别是在使用Vue.js进行单页面应用开发时，更是如此。在Vue 3中，路由守卫的使用有了更多的灵活性与功能。本文将详细介绍如何在Vue 3应用中使用路由守卫，并通过示例代码帮助您更深入地理解和掌握这一重要技能。
一、什么是路由守卫？
路由守卫顾名思义，是对路由跳转进行控制和保护的一种手段。通过在路由跳转前后进行拦截，可以在用户导航到特定页面前进行一些逻辑处理，比如用户认证、数据准备、权限校验等。Vue Router 提供了三类守卫：
- 全局守卫：对所有路由有效。
- 路由独享守卫：只对单个路由有效。
- 组件内守卫：对特定组件有效。
二、全局路由守卫
全局路由守卫包括全局前置守卫、全局解析守卫和全局后置守卫。
1. 全局前置守卫
全局前置守卫会在每次路由变化前触发。可以用来判断用户是否有权限进入某个路由。
import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [
// 路由配置
]
});
router.beforeEach((to, from, next) => {
// 判断用户是否已登录
const isAuthenticated = false; // 这里可以根据实际情况进行判断
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login'); // 跳转到登录页
} else {
next(); // 放行
}
});
export default router;
2. 全局解析守卫
全局解析守卫在beforeEach和组件内守卫之间执行。用于在导航被确认前做一些异步操作。
router.beforeResolve((to, from, next) => {
// 这里可以执行一些异步操作，比如数据加载
// 异步操作完成后调用 next()
next();
});
3. 全局后置守卫
全局后置守卫不会改变导航本身，只能用于一些辅助操作，比如修改页面标题等。
router.afterEach((to, from) => {
// 修改页面标题
document.title = to.meta.title || '默认标题';
});
三、路由独享守卫
路由独享守卫是定义在路由配置中的守卫，只对该路由有效。
const routes = [
{
path: '/dashboard',
component: () => import('../views/Dashboard.vue'),
beforeEnter: (to, from, next) => {
// 只有在用户登录时才允许访问
const isAuthenticated = false; // 这里根据实际情况判断
if (isAuthenticated) {
next();
} else {
next('/login');
}
}
}
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
四、组件内守卫
组件内守卫是在组件内部定义的守卫，可以更细粒度地控制组件的导航行为。包括 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。
1. beforeRouteEnter
在导航进入该组件的路由之前调用。在此守卫中不能访问 this，因为组件实例还未被创建，通常用于判断是否允许进入该路由。
export default {
name: 'Dashboard',
beforeRouteEnter(to, from, next) {
// 判断用户是否已登录
const isAuthenticated = false; // 这里根据实际情况判断
if (isAuthenticated) {
next();
} else {
next('/login');
}
}
};
2. beforeRouteUpdate
当路由变化但依旧停留在当前组件时调用。比如从 /user/1 到 /user/2 这种情况会触发 beforeRouteUpdate。
export default {
name: 'UserProfile',
beforeRouteUpdate(to, from, next) {
// 这里可以执行一些更新操作
this.userId = to.params.id; // 假设userId是组件的一个属性
next();
}
};
3. beforeRouteLeave
在导航离开该组件的路由时调用。常用于提示用户是否保存未提交的信息。
export default {
name: 'FormComponent',
beforeRouteLeave(to, from, next) {
if (this.hasUnsavedChanges) { // 假设hasUnsavedChanges用来标识是否有未保存的更改
if (confirm('你有未保存的更改，确定离开吗？')) {
next();
} else {
next(false);
}
} else {
next();
}
}
};
五、示例代码整合
下面我们将一些常见的路由守卫需求整合到一个完整的示例应用中。
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import Dashboard from '../views/Dashboard.vue';
import Login from '../views/Login.vue';
import UserProfile from '../views/UserProfile.vue';
import FormComponent from '../views/FormComponent.vue';
// 路由配置
const routes = [
{
path: '/',
component: Home
},
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true },
beforeEnter: (to, from, next) => {
const isAuthenticated = false; // 根据实际情况判断
if (isAuthenticated) {
next();
} else {
next('/login');
}
}
},
{
path: '/login',
component: Login
},
{
path: '/user/:id',
component: UserProfile
},
{
path: '/form',
component: FormComponent
}
];
// 创建路由实例
const router = createRouter({
history: createWebHistory(),
routes
});
// 全局前置守卫
router.beforeEach((to, from, next) => {
const isAuthenticated = false; // 根据实际情况判断
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});
// 全局后置守卫
router.afterEach((to, from) => {
document.title = to.meta.title || '默认标题';
});
export default router;
六、总结
路由守卫在Vue 3中的应用使得我们能够更加灵活地控制用户导航行为，无论是全局守卫、路由独享守卫还是组件内守卫，都各有各的使用场景。通过合理的使用路由守卫，可以有效提升应用的安全性和用户体验。希望本文能帮助您更好地理解和使用Vue 3中的路由守卫。
更多面试题请点击：web前端高频面试题_在线视频教程-CSDN程序员研修院
最后问候亲爱的朋友们，并邀请你们阅读我的全新著作
