vue3中导航守卫

简介: vue3中导航守卫

在 Vue 3 中,导航守卫(Navigation Guards)是用来控制路由访问权限或者执行一些路由跳转前的操作的重要工具。导航守卫允许你在路由发生变化时运行一些代码片段,比如检查用户是否已登录、保存滚动位置或者异步获取数据等。


Vue Router 4.x(Vue 3 的配套路由库)中提供了多种类型的导航守卫,它们分别在不同时刻触发:


  1. 全局前置守卫:在路由跳转前被调用。
  2. 全局解析守卫:在路由配置解析之后,但在导航被确认之前被调用。
  3. 全局后置守卫:在路由跳转后被调用。
  4. 路由独享的守卫:定义在路由配置对象中的 beforeEnter 守卫。
  5. 组件内的守卫:定义在组件内的 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave 守卫。

下面是如何在 Vue 3 中使用这些导航守卫的示例:


全局前置守卫

javascript复制代码


import { createRouter, createWebHistory } from 'vue-router';  

 

const router = createRouter({  

 history: createWebHistory(),  

 routes: [  

   // ... 路由配置  

 ]  

});  

 

router.beforeEach((to, from, next) => {  

 // 这里可以执行一些逻辑,比如权限检查  

 // to 是即将要进入的目标路由对象  

 // from 是当前导航正要离开的路由  

 // next 是一个函数,一定要调用它,否则路由不会继续  

 

 // 示例:检查用户是否登录  

 const isLoggedIn = /* ... */;  

 if (to.name !== 'Login' && !isLoggedIn) {  

   next({ name: 'Login' }); // 跳转到登录页面  

 } else {  

   next(); // 否则,确保一定要调用 next()  

 }  

});  

 

export default router;


路由独享的守卫

javascript复制代码


const routes = [  

 {  

   path: '/user/:id',  

   component: User,  

   beforeEnter: (to, from, next) => {  

     // 这里的逻辑只会在进入 `/user/:id` 路由时执行  

     const userId = to.params.id;  

     fetchUser(userId).then(user => {  

       // 保存用户信息到 Vuex 或其他状态管理库  

       next();  

     }).catch(() => {  

       next(false); // 如果获取用户失败,则中断当前的导航  

     });  

   }  

 },  

 // ... 其他路由  

];


组件内的守卫

javascript复制代码


const routes = [  

 {  

   path: '/user/:id',  

   component: User,  

   beforeEnter: (to, from, next) => {  

     // 这里的逻辑只会在进入 `/user/:id` 路由时执行  

     const userId = to.params.id;  

     fetchUser(userId).then(user => {  

       // 保存用户信息到 Vuex 或其他状态管理库  

       next();  

     }).catch(() => {  

       next(false); // 如果获取用户失败,则中断当前的导航  

     });  

   }  

 },  

 // ... 其他路由  

];



需要注意的是,在 Vue 3 和 Vue Router 4 中,守卫函数中的 next 调用方式有所变化。不再支持 next(true) 和 next(false) 这样的用法,而是应该直接调用 next() 或者传递一个路由位置给 next 来改变导航目标。如果 next 被调用时没有传递任何参数,那么导航会继续进行。


最后,请确保你使用的 Vue Router 版本与 Vue 3 兼容,并查阅 Vue Router 的官方文档以获取最新的导航守卫使用方法和最佳实践。


目录
打赏
0
0
0
0
7
分享
相关文章
斩获开发者口碑!SnowAdmin:基于 Vue3 的高颜值后台管理系统,3 步极速上手!
SnowAdmin 是一款基于 Vue3/TypeScript/Arco Design 的开源后台管理框架,以“清新优雅、开箱即用”为核心设计理念。提供角色权限精细化管理、多主题与暗黑模式切换、动态路由与页面缓存等功能,支持代码规范自动化校验及丰富组件库。通过模块化设计与前沿技术栈(Vite5/Pinia),显著提升开发效率,适合团队协作与长期维护。项目地址:[GitHub](https://github.com/WANG-Fan0912/SnowAdmin)。
430 5
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中,我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时,nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法,并通过三个实战案例,展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。
186 17
基于 ant-design-vue 和 Vue 3 封装的功能强大的表格组件
VTable 是一个基于 ant-design-vue 和 Vue 3 的多功能表格组件,支持列自定义、排序、本地化存储、行选择等功能。它继承了 Ant-Design-Vue Table 的所有特性并加以扩展,提供开箱即用的高性能体验。示例包括基础表格、可选择表格和自定义列渲染等。
202 6
Vue 2 与 Vue 3 的区别:深度对比与迁移指南
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,在过去的几年里,Vue 2 一直是前端开发中的重要工具。而 Vue 3 作为其升级版本,带来了许多显著的改进和新特性。在本文中,我们将深入比较 Vue 2 和 Vue 3 的主要区别,帮助开发者更好地理解这两个版本之间的变化,并提供迁移建议。 1. Vue 3 的新特性概述 Vue 3 引入了许多新特性,使得开发体验更加流畅、灵活。以下是 Vue 3 的一些关键改进: 1.1 Composition API Composition API 是 Vue 3 的核心新特性之一。它改变了 Vue 组件的代码结构,使得逻辑组
499 0
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
198 0
|
3月前
|
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
371 4
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
239 77
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件,包括基础与高级示例。组件支持分段配置(如颜色、文本)、动画效果及超出进度提示等功能。同时提供了完整的代码实现,支持全局注册,并提出了优化建议,如主题支持、响应式设计等,帮助开发者更灵活地集成和定制进度条组件。资源链接已提供,适合前端开发者参考学习。
165 17
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等