当前位置: 首页 > news >正文

导航守卫有哪三种?

导航守卫主要分为三种:

  1. 全局前置守卫:使用 router.beforeEach 注册,作用是在路由切换开始前进行拦截和处理,可以用来进行一些全局的权限校验、登录状态检查等操作。

  2. 全局解析守卫:使用 beforeResolve 注册,作用是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,进行一些操作。

  3. 全局后置钩子:使用 afterEach 注册,作用是在导航成功完成后进行一些全局的清理操作,比如页面的埋点统计、日志记录等。

这些导航守卫适用于需要在路由切换过程中做一些额外处理的情况,比如权限控制、页面加载前后的操作等。

以下是一个简单的示例代码:

const router = new VueRouter({routes: [{path: '/admin',component: Admin,beforeEnter: (to, from, next) => {// 在进入 /admin 路由前进行权限校验if (user.isAdmin) {next(); // 确认跳转} else {next('/login'); // 重定向到登录页面}}}]
});router.beforeEach((to, from, next) => {// 在每次路由切换前进行全局的拦截处理,比如检查登录状态if (to.meta.requiresAuth && !user.isAuthenticated) {next('/login');} else {next();}
});router.afterEach((to, from) => {// 在每次路由切换后进行全局的清理操作,比如页面埋点统计trackPageView(to.path);
});

以上示例展示了如何使用全局前置守卫、全局解析守卫和全局后置钩子对路由进行拦截、处理和清理操作。这些导航守卫能够帮助我们在路由切换时进行额外的控制和操作。

http://www.lryc.cn/news/235028.html

相关文章:

  • 强烈 推荐 13 个 Web前端在线代码IDE
  • 网络协议 WebSocket
  • 路径操作 合法路径名
  • JavaEE初阶 01 计算机是如何工作的
  • 【shell 常用脚本30例】
  • 【我和Python算法的初相遇】——体验递归的可视化篇
  • 【C语言的秘密】密探—深究C语言中多组输入的秘密!
  • ClickHouse 语法优化规则
  • 3-运行第一个docker image-hello world
  • 【漏洞复现】泛微e-Weaver SQL注入
  • 「git 系列」git 如何存储代码的?
  • IDEA 集成 Docker 插件一键部署 SpringBoot 应用
  • IDEA无法查看源码是.class,而不是.java解决方案?
  • 机器视觉系统选型-定光照强度
  • ChatGLM3-6B:新一代开源双语对话语言模型,流畅对话与低部署门槛再升级
  • StoneDB顺利通过中科院软件所 2023 开源之夏 结项审核
  • Linux本地docker一键部署traefik+内网穿透工具实现远程访问Web UI管理界面
  • SpringCloud FeignClient声明式服务调用采坑记录(A调用服务B/C,B/C重启后必须重启A后才能成功调用配置项)
  • 安装银河麒麟linux系统docker(docker-compose)环境,注意事项(一定能解决,有环境资源)
  • BUG:编写springboot单元测试,自动注入实体类报空指针异常
  • 深度解析 InterpretML:打开机器学习模型的黑箱
  • 数据结构初阶leetcodeOJ题(二)
  • 若依框架数据源切换为pg库
  • java 访问sqlserver 和 此驱动程序不支持jre1.8错误
  • C/C++字符判断 2021年12月电子学会青少年软件编程(C/C++)等级考试一级真题答案解析
  • Kotlin语言实现单击任意TextVIew切换一个新页面,并且实现颜色变换
  • Flume学习笔记(4)—— Flume数据流监控
  • 使用webhook发送企业微信消息
  • C语言的由来与发展历程
  • python django 小程序博客源码