路由导航守卫

路由导航守卫有哪些:

全局守卫
组件内守卫
独享守卫

1.全局守卫

beforeEach 全局前置守卫
beforeResolve 全局解析守卫
afterEach 全局后置守卫

在创建实例的过程中,我们可以定义全局守卫:

2.独享守卫

beforeEnter 就是放到routes中定义的:

const routes = [
    {
        name: 'user',
        component: User
        beforeEnter: (to, from) => {
            
        }
    }
]
//beforeEnter: [removeQueryParams, removeHash], 可以接受函数数组,removeQueryParams,removeHash为自定义的函数
注意点是独享守卫在路由参数改变但是路由本身地址没有变化的情况下是不会再次触发的。

3.组件内守卫


beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave

beforeRouteEnter: 组件对应路由被验证前调用,不能获取组件实例this
beforeRouteUpdate:在当前组件路由改变时,但是组件本身被复用时调用。可以访问this。
beforeRouteLeave:在导航离开当前组件路由时调用,可以访问this

Vue3中setup 中调用可以通过api onBeforeRouteUpdate和onBeforeRouteLeave分别添加update和leave守卫

注意一个事情是beforeRouteEnter中如果想要拿到this实例可以通过next回调函数

beforeRouteEnter: (to, from, next) => {
    next(vm => { //这里vm相当于组件实例this,可以正常访问到组件内数据
            
    })
}
但是next回调被调用时已经时组件路由被读取解析并记录后才调用的,就是如果你要在回调中去重定向路由,那么你当前页面的路由也是在路由记录中的。

完整的导航解析流程:
1.已经失活的组件调用beforeRouteLeave
2.调用全局前置守卫beforeEach
3.调用复用组件的beforeRouteUpdate
4.在路由配置里调用beforeEnter
5.解析异步路由组件
6.调用被激活组件内beforeRouteEnter
7.调用全局解析守卫beforeResolve
8.导航被确认
9.调用全局后置守卫afterEach
10.触发Dom更新
12.调用beforeRouteEnter守卫中传给next的回调函数,创建好的组件实例会作为回调函数的参数传入

综上所述,Vue Router中的导航守卫是非常灵活且强大的功能,我们可以使用全局守卫、路由守卫和组件内守卫,来实现各种自定义的逻辑。在日常开发中,我们可以根据具体需求,灵活运用这些守卫,以达到更好的用户体验和功能实现。

总结起来,导航守卫是Vue Router中非常重要的功能,它可以帮助我们在路由切换过程中做一些自定义的逻辑处理。通过全局守卫、路由守卫和组件内守卫,我们可以实现各种各样的功能,例如路由拦截、权限验证、路由切换动画等。在实际项目开发中,合理使用导航守卫,能够提高开发效率和用户体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/177881.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

上市公司-供应链效率数据集(2000-2022年)

参照张倩肖(2023)、Feng(2015)、张树山(2023)的做法,团队以库存周转天数来衡量供应链效率 库存周转天数有效克服了因企业保留安全库存而导致供应链效率较低的测算误差,体现供应链上…

MATLAB R2023a下载链接及软件安装教程

先解释下什么是A什么是B,省的有些小菜们总问。 a是上半年,b是下半年版本,但是有些小弱们总是觉得只要是b一定功能多,这不一定的,同年版本b比a可能稍微全点,不同年的,比如21b,22a&am…

最新ai系统ChatGPT商业运营版网站源码+支持GPT4.0/支持AI绘画+已支持OpenAI GPT全模型+国内AI全模型+绘画池系统

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统,支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美,可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如…

2103. 环和杆

2103. 环和杆 难度: 简单 来源: 每日一题 2023.11.02 总计有 n 个环,环的颜色可以是红、绿、蓝中的一种。这些环分别穿在 10 根编号为 0 到 9 的杆上。 给你一个长度为 2n 的字符串 rings ,表示这 n 个环在杆上的分布。rings 中每两个字符形成一个…

新版Idea显示Git提交人信息

新版Idea的类和方法上会展示开发者信息 不想展示的话可以做以下配置:

ModStartCMS v7.5.0 内外网映射节流,安全使用增强

ModStart 是一个基于 Laravel 模块化极速开发框架。模块市场拥有丰富的功能应用,支持后台一键快速安装,让开发者能快的实现业务功能开发。 系统完全开源,基于 Apache 2.0 开源协议,免费且不限制商业使用。 功能特性 丰富的模块市…

找工作时如何快速了解一家公司?看他们招聘就知道

每一位求职者,都希望自己能够对感兴趣或者符合自己期望条件的公司有一个全面而深入的了解。如何在找工作或者找实习的时候,快速地了解一家公司,那就看看他们的招聘吧! 1、从招聘信息洞察公司格局 有些公司的招聘信息中&#xf…

回归预测 | Matlab实现SO-CNN-SVM蛇群算法优化卷积神经网络-支持向量机的多输入单输出回归预测

Matlab实现SO-CNN-SVM蛇群算法优化卷积神经网络-支持向量机的多输入单输出回归预测 目录 Matlab实现SO-CNN-SVM蛇群算法优化卷积神经网络-支持向量机的多输入单输出回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.SO-CNN-SVM蛇群算法优化卷积神经网络-支持向量…

protected by SourceGuardian and requires a SourceGuardian loader ‘ixed.8解决方案

php相关问题 安装程序提示以下内容 遇到某些php程序的安装提示: PHP script ‘/www/wwwroot/zhengban.youyacao.com/install/index.php’ is protected by SourceGuardian and requires a SourceGuardian loader ‘ixed.8.1.lin’ to be installed. 1) Click her…

移动硬盘只读模式怎么取消?

当硬盘驱动器处于为只读模式时,您仅能读取保存在该驱动器中的数据,但却无法添加新数据和修改当前数据。如果您想要对数据做一些改变就需要取消只读模式。那么,移动硬盘只读模式怎么取消? 方案一:使用命令提示符移除只读…

日本移动支付Merpay QA团队的自动化现状

Merpay是日本最大的网购平台之一Mercari的无现金支付系统。Merpay 的主要功能是让用户在 Mercari的网站上购物,也可以在日本的许多实体店和餐厅使用它,也可以理解为日本的“支付宝”。以下为Merpay QA 团队在自动化方面的一些思考: 这几年&am…

Linux0.11内核源码解析-malloc

malloc介绍 Linux内核版本0.11中的malloc.c文件实现了内存分配的功能。在这个版本的Linux内核中,malloc.c文件包含了内核级别的内存分配函数,用于分配和释放内核中的内存。这些函数可以帮助内核管理可用的内存,并允许内核动态地分配和释放内…

投资者如何保障个人利益?行业律师与欧科云链专家给出建议

香港作为全球加速拥抱Web3变革的引领之地,规定自今年6月起在香港经营虚拟资产服务业务需申领牌照。蜂拥而至的Web3创业公司,伺机而动的加密货币交易所,以及跃跃欲试的行业从业者,都让这座金融之都热闹非凡。但近期伴随JPEX诈骗案等…

基于单片机设计的电子柜锁

一、前言 随着现代社会的不断发展,电子柜锁的应用越来越广泛。传统的机械柜锁存在一些不便之处,例如钥匙容易丢失、密码容易泄露等问题。设计一款基于单片机的电子柜锁系统成为了一个有趣而有意义的项目。 该电子柜锁系统通过电磁锁作为柜锁的开关&…

【强化学习】14 —— A3C(Asynchronous Advantage Actor Critic)

A3C算法( Asynchronous Methods for Deep Reinforcement Learning)于2016年被谷歌DeepMind团队提出。A3C是一种非常有效的深度强化学习算法,在围棋、星际争霸等复杂任务上已经取得了很好的效果。接下来,我们先从A3C的名称入手&…

电脑如何录制小视频

如果你想在你的电脑上录制视频分享给你的朋友或者亲人,无论你的电脑是win还是mac,都可以在本篇文章中找到电脑录制视频的详细教程。小编为你们整理了2种不同系统电脑的录制详细流程,继续阅读查看吧! 第一部分:windows…

计算样本方差和总体方差

例如,给出了三个数据,194、183、175,现在计算样本方差和总体方差。 手工计算 它们的平均值 样本方差 总体方差 用excel计算 样本方差 总体方差

ChatGPT对未来发展的影响?一般什么时候用到GPT

ChatGPT以其强大的自然语言处理能力对未来的发展具有重要影响。以下是ChatGPT的潜在影响和一般使用情况: 改善自然语言理解和生成:ChatGPT和类似的模型可以改善机器对人类语言的理解和生成。这将有助于改进各种应用领域,包括智能助手、聊天机…

恒驰服务 | 华为云数据使能专家服务offering之大数据建设

恒驰大数据服务主要针对客户在进行智能数据迁移的过程中,存在业务停机、数据丢失、迁移周期紧张、运维成本高等问题,通过为客户提供迁移调研、方案设计、迁移实施、迁移验收等服务内容,支撑客户实现快速稳定上云,有效降低时间成本…

基于深度学习的中文情感分类 - 卷积神经网络 情感分类 情感分析 情感识别 评论情感分类 计算机竞赛

文章目录 1 前言2 情感文本分类2.1 参考论文2.2 输入层2.3 第一层卷积层:2.4 池化层:2.5 全连接softmax层:2.6 训练方案 3 实现3.1 sentence部分3.2 filters部分3.3 featuremaps部分3.4 1max部分3.5 concat1max部分3.6 关键代码 4 实现效果4.…