vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)

目录

一、什么是Vue路由导航守卫?

二、全局守卫

1、beforeEach

下面是一个beforeEach的示例代码:

2、beforeResolve

下面是一个beforeResolve的示例代码:

3、afterEach

下面是一个afterEach的示例代码:

三、路由独享守卫

1、beforeEnter

下面是一个beforeEnter的示例代码:

2、afterEnter

下面是一个afterEnter的示例代码:

四、组件内守卫

1、beforeRouteEnter

下面是一个beforeRouteEnter的示例代码:

2、beforeRouteUpdate

下面是一个beforeRouteUpdate的示例代码:

3、beforeRouteLeave

下面是一个beforeRouteLeave的示例代码:

五、总结


 

一、什么是Vue路由导航守卫?

Vue路由导航守卫是Vue Router提供的一种机制,它可以让你在路由跳转之前或之后执行一些自定义逻辑,例如:鉴权、重定向等。守卫分为全局守卫、路由独享守卫和组件内守卫。

二、全局守卫

全局守卫作用于所有路由,包括进入路由、离开路由、进入子路由和离开子路由。全局守卫有三个:beforeEach、beforeResolve和afterEach。

1、beforeEach

beforeEach在路由跳转之前被调用,它接收三个参数:to、from和next。
to:即将进入的路由对象;from:当前导航正要离开的路由对象;next:函数,必须调用next()来resolve钩子。

下面是一个beforeEach的示例代码:

router.beforeEach((to, from, next) => {if (to.meta.requiresAuth && !user.isLoggedIn) { // 鉴权next({path: '/login', // 重定向到登录页query: {redirect: to.fullPath} // 保存跳转路径})} else {next() // 继续跳转}
})

上面的代码中,我们使用了to.meta.requiresAuth来判断该路由是否需要鉴权,如果需要鉴权且用户没有登录,则将用户重定向到登录页,并通过query参数记录下用户原本想要跳转的路径。

2、beforeResolve

beforeResolve是在导航被确认之前被调用,它接收一个参数:to。
to:即将进入的目标路由对象。

下面是一个beforeResolve的示例代码:

router.beforeResolve((to) => {console.log('正在进入', to.name || to.path)
})

上面的代码中,我们使用了to.name || to.path来获取路由的名称或路径,并在控制台输出正在进入的路由名称或路径。

3、afterEach

afterEach在路由跳转之后被调用,它接收两个参数:to和from。
to:即将进入的路由对象;from:当前导航正要离开的路由对象。

下面是一个afterEach的示例代码:

router.afterEach((to, from) => {console.log('从', from.name || from.path, '跳转到', to.name || to.path)
})

上面的代码中,我们使用了from.name || from.path和to.name || to.path来获取路由的名称或路径,并在控制台输出从哪个路由跳转到哪个路由了。

三、路由独享守卫

路由独享守卫作用于单个路由,它们在路由配置中定义。路由独享守卫有两个:beforeEnter和afterEnter。

1、beforeEnter

beforeEnter在路由切换前被调用,它接收三个参数:to、from和next。
to:即将进入的路由对象;from:当前导航正要离开的路由对象;next:函数,必须调用next()来resolve钩子。

下面是一个beforeEnter的示例代码:

const routes = [{path: '/dashboard',component: Dashboard,beforeEnter: (to, from, next) => {if (user.isAdmin) { // 鉴权next() // 继续跳转} else {next('/forbidden') // 跳转到禁止访问页}}}
]

上面的代码中,我们使用了user.isAdmin来判断用户是否是管理员,如果是管理员则可以访问/dashboard路由,否则跳转到/forbidden路由。

2、afterEnter

afterEnter在路由切换后被调用,它接收一个参数:to。
to:即将进入的目标路由对象。

下面是一个afterEnter的示例代码:

const routes = [{path: '/dashboard',component: Dashboard,afterEnter: (to) => {console.log(to.name || to.path, '已进入')}}
]

上面的代码中,我们使用了to.name || to.path来获取路由的名称或路径,并在控制台输出已进入该路由。

四、组件内守卫

组件内守卫作用于单个组件,它们与全局守卫和路由独享守卫不同的是,它们不需要在路由配置中定义,而是在组件内定义。

1、beforeRouteEnter

beforeRouteEnter在路由进入组件前被调用,它接收三个参数:to、from和next。
to:即将进入的路由对象;from:当前导航正要离开的路由对象;next:函数,必须调用next()来resolve钩子。

下面是一个beforeRouteEnter的示例代码:

export default {beforeRouteEnter(to, from, next) {if (user.hasPermission) { // 鉴权next() // 继续进入该组件} else {next(false) // 禁止进入该组件}}
}

上面的代码中,我们使用了user.hasPermission来判断用户是否有权限进入该组件,如果有权限则进入该组件,否则禁止进入该组件。

2、beforeRouteUpdate

beforeRouteUpdate在路由进入组件后,组件复用时被调用,它接收两个参数:to和from。
to:即将进入的路由对象;from:当前导航正要离开的路由对象。

下面是一个beforeRouteUpdate的示例代码:

export default {beforeRouteUpdate(to, from) {console.log('从', from.name || from.path, '到', to.name || to.path)}
}

上面的代码中,我们使用了from.name || from.path和to.name || to.path来获取路由的名称或路径,并在控制台输出从哪个路由跳转到哪个路由了。

3、beforeRouteLeave

beforeRouteLeave在路由离开组件时被调用,它接收两个参数:to和from和next。
to:即将进入的路由对象;from:当前导航正要离开的路由对象;next:函数,必须调用next()来resolve钩子。

下面是一个beforeRouteLeave的示例代码:

export default {beforeRouteLeave(to, from, next) {if (shouldLeave) { // 确认是否离开next() // 继续离开} else {next(false) // 禁止离开}}
}

上面的代码中,我们使用了shouldLeave来判断用户是否要离开该组件,如果要离开则继续离开,否则禁止离开。

五、总结

Vue路由导航守卫是Vue Router提供的一种机制,可以让你在路由跳转之前或之后执行一些自定义逻辑,例如:鉴权、重定向等。守卫分为全局守卫、路由独享守卫和组件内守卫,每种守卫都有自己的使用场景。在使用守卫时,需要注意它们的执行顺序和next函数的使用,避免出现无限循环的情况。

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

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

相关文章

Shell - 学习笔记 - 1.14 - 如何编写自己的Shell配置文件(配置脚本)?

第1章 Shell基础(开胃菜) 14 - 如何编写自己的Shell配置文件(配置脚本)? 学习了《Shell配置文件的加载》一节,读者应该知道 Shell 在登录和非登录时都会加载哪些配置文件了。对于普通用户来说,也许 ~/.bashrc 才是最重要的文件,因为不管是否登录都会加载该文件。 我们…

【数据处理】NumPy数组的合并操作,如何将numpy数组进行合并?

,NumPy中的合并操作是指将两个或多个数组合并成一个数组的操作。这种操作可以通过不同的函数来实现。 一、横向合并(水平合并) 横向合并是指将两个具有相同行数的数组按列方向合并成一个数组的操作。在NumPy中,可以使用hstack()…

044:vue中引用json数据的方法

第044个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。 (1)提供vue2的一些基本操作:安装、引用,模板使…

多相Buck的工作原理

什么是多相Buck电源? 多相电源控制器是一种通过同时控制多个电源相位的设备,以提供稳定的电力供应。相位是指电源中的电流和电压波形。多相控制器的设计旨在最大程度地减小电力转换系统的纹波,并提高整体能效。它通常包含一系列的功率级联&a…

我的创作纪念日1024天纪念

机缘 经历的1024天,突然有一种惊奇,日子一天天过,有种恍惚的感觉 收获 从最开始的随笔,慢慢向着笔记总结转变,不经意间积累了好多 憧憬 虽不知最终会怎样发展,但坚持与向前是一定的,未来一…

结构化布线系统

满足下列需求: 1.标准化:国际、国家标准。 2.实用性:针对实际应用的需要和特点来建设系统。 3.先进性:采用国际最新技术。5-10年内技术不落后。 4.开放性:整个系统的开放性。 5.结构化、层次化:易于管理和维…

Matplotlib数据可视化

绘图基础语法 1 创建画布并且创建子图 首先创建一个空白的画布,并且可以将画布分为几个部分,这样就可以在同一附图上绘制多个图像。 plt.figure 创建一个空白画布,可以指定画布大小、像素 figure.add_subplot 创建并且选中子…

docker镜像、容器管理与迁移

镜像管理 搜索镜像: 这种方法只能用于官方镜像库 搜索基于 centos 操作系统的镜像 # docker search centos 按星级搜索镜像: 查找 star 数至少为 100 的镜像,默认不加 s 选项找出所有相关 ubuntu 镜像: …

【web安全】文件读取与下载漏洞

前言 菜某整理仅供学习,有误请赐教。 概念 个人理解:就是我们下载一个文件会传入一个参数,但是我们可以修改参数,让他下载其他的文件。因为是下载文件,所以我们可以看到文件里面的源码,内容。 文件读取…

Python嗅探和解析网络数据包

网络工具解释 Scapy是Python2和Python3都支持的库。 它用于与网络上的数据包进行交互。 它具有多种功能,通过这些功能我们可以轻松伪造和操纵数据包。 通过 scapy 模块,我们可以创建不同的网络工具,如 ARP Spoofer、网络扫描仪、数据包转储器…

swiftUi——颜色

在SwiftUI中,您可以使用Color结构来表示颜色。Color可以直接使用预定义的颜色,例如.red、.blue、.green等,也可以使用自定义的RGB值、十六进制颜色代码或者系统提供的颜色。 1. 预定义颜色 Text("预定义颜色").foregroundColor(.…

Swing程序设计(9)复选框,下拉框

文章目录 前言一、复选框二、下拉框总结 前言 该篇文章简单介绍了Java中Swing组件里的复选框组件、列表框组件、下拉框组件,这些在系统中都是常用的组件。 一、复选框 复选框(JCheckBox)在Swing组件中的使用也非常广泛,一个方形方…

Albumentations(Augmentation Transformations)

Albumentations(Augmentation Transformations) Albumentations(Augmentation Transformations)是一个用于图像数据增强(数据增广)的Python包。它提供了丰富的图像增强技术,用于训练机器学习模…

hadoop安装与配置-shell脚本一键安装配置(集群版)

文章目录 前言一、安装准备1. 搭建集群 二、使用shell脚本一键安装1. 复制脚本2. 增加执行权限3. 分发脚本4. 执行脚本5. 加载用户环境变量 三、启动与停止1. 启动/停止hadoop集群(1) 复制hadoop集群启动脚本(2) 增加执行权限(3) 启动hadoop集群(4) 停止hadoop集群(5) 重启hado…

智慧社区前景无限,科技引领未来发展

社区是城镇化发展的标志,作为人类现代社会的生活的基本圈子,是人类生活离不开的地方,社区人口密度大、车辆多,管理无序,社区的膨胀式发展多多少少带来一定的管理上的缺失。社区作为智慧城市建设的重要一环,…

编译基于LIO-SAM的liorf“Large velocity, reset IMU-preintegration!“

使用LIO-SAM修改的代码liorf(因自己使用的IMU传感器是 6-axis ouster): LIO-SAM代码连接: https://github.com/TixiaoShan/LIO-SAM liorf代码连接: https://github.com/YJZLuckyBoy/liorf 编译运行出现错误&#…

eve-ng山石网科HillStone镜像部署

HillStone 部署 author:leadlife data:2023/12/4 mains:EVE-ng HillStone 镜像部署 - use hillstone-sg6000 default:hillstone/hillstone 传输 scp hillstone-sg6000.zip root192.168.3.130:/opt/unetlab/addons/qemu/部署 cd …

echarts绘制一个环形图

其他echarts&#xff1a; echarts绘制一个柱状图&#xff0c;柱状折线图 echarts绘制一个饼图 echarts绘制一个环形图2 效果图&#xff1a; 代码&#xff1a; <template><div class"wrapper"><!-- 环形图 --><div ref"doughnutChart…

深入理解Spring Kafka中@KafkaListener注解的参数与使用方式

Apache Kafka作为一个强大的消息代理系统&#xff0c;与Spring框架的集成使得在分布式应用中处理消息变得更加简单和灵活。Spring Kafka提供了KafkaListener注解&#xff0c;为开发者提供了一种声明式的方式来定义消息监听器。在本文中&#xff0c;我们将深入探讨KafkaListener…

C++STL的string(超详解)

文章目录 前言C语言的字符串 stringstring类的常用接口string类的常见构造string (const string& str);string (const string& str, size_t pos, size_t len npos); capacitysize和lengthreserveresizeresize可以删除数据 modify尾插插入字符插入字符串 inserterasere…