阿珊详解Vue Router的守卫机制

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

    • 摘要:
    • 引言:
    • 正文:
      • 1. 🔧 全局守卫
      • 2. 🔧 路由独享的守卫
      • 3. 🔧 组件内的守卫
    • 总结
    • 参考资料:

摘要:

🤔 Vue Router提供了强大的守卫机制,用于在路由跳转前后进行操作和判断。本文将介绍Vue Router的守卫类型及其应用,帮助读者更好地掌握路由管理。👩‍💻

引言:

🌈 Vue.js以其简洁的语法和声明式的数据绑定受到开发者的喜爱。在单页面应用(SPA)中,路由管理是不可或缺的功能。Vue Router作为Vue的路由器库,提供了丰富的功能,其中守卫机制是其中一个重要的特点。本文将带你深入了解Vue Router的守卫机制,并学会如何使用它们来管理路由。🚀

正文:

1. 🔧 全局守卫

类型:全局守卫是对路由跳转的全局控制,可以在路由跳转的前后进行操作。
应用场景:例如,全局判断用户是否登录,根据登录状态决定是否允许访问某个路由。

全局守卫是 Vue Router 提供的全局拦截器,可以在路由导航过程中对请求进行拦截处理。全局守卫有三种类型:beforeEach、beforeEnter 和 afterEach。

  1. beforeEach:在导航守卫中调用,进入路由之前调用。可以通过 next 函数继续导航,或者通过返回 false 取消导航。

  2. beforeEnter:在导航守卫中调用,进入路由之前调用。这个钩子可以访问 tofrom 对象,可以通过 next 函数继续导航,或者通过返回 false 取消导航。

  3. afterEach:在导航守卫中调用,进入路由之后调用。这个钩子可以访问 tofrom 对象,但是不能取消导航。

以下是一个简单的示例:

// 导入 Vue 和 Vue Router
import Vue from 'vue';
import VueRouter from 'vue-router';// 注册 Vue Router
Vue.use(VueRouter);// 定义路由
const routes = [{path: '/',name: 'Home',component: HomeComponent,},{path: '/about',name: 'About',component: AboutComponent,},
];// 创建 router 实例
const router = new VueRouter({mode: 'history',routes,
});// 在全局守卫中使用 beforeEach
router.beforeEach((to, from, next) => {console.log('全局守卫 - beforeEach');next();
});// 在全局守卫中使用 beforeEnter
router.beforeEnter((to, from, next) => {console.log('全局守卫 - beforeEnter');next();
});// 在全局守卫中使用 afterEach
router.afterEach((to, from) => {console.log('全局守卫 - afterEach');
});// 导出 router 实例
export default router;

在这个示例中,我们定义了全局守卫,分别在进入路由之前、进入路由之后和导航守卫中调用。当导航到不同的路由时,会打印相应的全局守卫日志。

2. 🔧 路由独享的守卫

类型:路由独享的守卫是指对单个路由进行控制,可以在进入或离开路由时进行操作。
应用场景:例如,进入某个路由前检查权限,或者离开某个路由前保存数据。

路由独享的守卫是 Vue Router 提供的在特定路由上拦截器,可以在路由导航过程中对请求进行拦截处理。路由独享的守卫通过在路由对象上定义 beforeEnter 属性来实现。

下面是一个简单的示例:

const routes = [{path: '/',name: 'Home',component: HomeComponent,beforeEnter: (to, from, next) => {// 在这里编写拦截逻辑if (/* 满足条件 */) {next(); // 继续导航} else {next('/login'); // 跳转到登录页面}},},{path: '/about',name: 'About',component: AboutComponent,},
];

在这个示例中,我们为 / 路由添加了 beforeEnter 属性,当导航到 / 路由时,会先执行 beforeEnter 中的逻辑,如果满足条件,则继续导航,否则跳转到登录页面。

需要注意的是,路由独享的守卫只对当前路由生效,不会影响其他路由的导航。

3. 🔧 组件内的守卫

类型:组件内的守卫是对组件路由的局部控制,可以在组件加载、更新或销毁时进行操作。
应用场景:例如,在组件加载时获取数据,或者在组件更新时进行数据更新。

组件内的守卫是 Vue Router 提供的在组件内部拦截器,可以在路由导航过程中对请求进行拦截处理。组件内的守卫有三种类型:beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave

  1. beforeRouteEnter:在导航守卫中调用,进入路由之前调用。此时,组件实例还没有被创建。可以通过 next 函数继续导航,或者通过返回 false 取消导航。

  2. beforeRouteUpdate:在导航守卫中调用,路由更新之前调用。此时,组件实例已经被创建,可以通过 next 函数继续导航,或者通过返回 false 取消导航。

  3. beforeRouteLeave:在导航守卫中调用,离开路由之前调用。此时,组件实例已经被创建,可以通过 next 函数继续导航,或者通过返回 false 取消导航。

以下是一个简单的示例:

export default {name: 'App',beforeRouteEnter(to, from, next) {console.log('组件内守卫 - beforeRouteEnter');next();},beforeRouteUpdate(to, from, next) {console.log('组件内守卫 - beforeRouteUpdate');next();},beforeRouteLeave(to, from, next) {console.log('组件内守卫 - beforeRouteLeave');next();},
};

在这个示例中,我们定义了组件内的守卫,分别在进入路由之前、路由更新之前和离开路由之前调用。当导航到不同的路由时,会打印相应的组件内守卫日志。

需要注意的是,组件内的守卫只能拦截当前组件的导航,无法拦截其他组件的导航。

总结

Vue Router的守卫机制是其强大的功能之一,通过全局守卫、路由独享的守卫和组件内的守卫,我们可以在路由跳转的前后进行各种操作和判断,从而实现对路由的精细化管理。在实际开发中,根据项目需求合理使用守卫机制,可以使我们的Vue应用更加安全和高效。🚀

参考资料:

  1. Vue Router官方文档
  2. Vue.js官方文档:路由

🌟 感谢您的阅读!如果您有任何疑问或建议,欢迎在评论区留言。💬

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

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

相关文章

【漏洞复现】Salia PLCC cPH2 远程命令执行漏洞(CVE-2023-46359)

0x01 漏洞概述 Salia PLCC cPH2 v1.87.0 及更早版本中存在一个操作系统命令注入漏洞,该漏洞可能允许未经身份验证的远程攻击者通过传递给连接检查功能的特制参数在系统上执行任意命令。 0x02 测绘语句 fofa:"Salia PLCC" 0x03 漏洞复现 ​…

video视频播放

1.列表页面 <template><div><ul><li class"item" v-for"(item,index) in list" :key"index" click"turnPlay(item.videoUrl)"><img :src"item.img" alt""><div class"btn…

套接字编程 --- 一

目录 1. 预备知识 1.1. 端口号 1.2. 认识TCP协议 1.3. 认识UDP协议 1.4. 网络字节序 2. socket 2.1. socket 常见系统调用 2.1.1. socket 系统调用 2.1.2. bind 系统调用 2.1.3. recvfrom 系统调用 2.1.4. sendto系统调用 2.3. 其他相关接口 2.3.1. bzero 2.3.2…

力扣:17. 电话号码的字母组合

力扣&#xff1a;17. 电话号码的字母组合 描述 给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 示例 1&#xff1a; 输…

Linux——文件重定向

目录 前言 一、重定向 二、重定向的运用 三、dup2 四、命令行中的重定向 五、为什么要有标准错误 前言 在之前我们学习了文件标识符&#xff0c;直到close可以使用文件标识符进行关闭&#xff0c;但是当我们关闭1号&#xff08;stdout&#xff09;时&#xff0c;无法往显…

00在linux环境下搭建stm32开发环境

文章目录 前言一、环境搭建1.arm-none-eabi-gcc2.openocd 三、创建stm32标准库工程1.创建工程目录2.修改stm32_flash.ld文件3.写makefile文件4.修改core_cm3.c5.写main函数并下载到板子上 最后 前言 我在那天终于说服自己将系统换成了linux系统了&#xff0c;当换成了linux系统…

UE5.1_使用技巧(常更)

UE5.1_使用技巧&#xff08;常更&#xff09; 1. 清除所有断点 运行时忘记蓝图中的断点可能会出现运行错误的可能&#xff0c;务必运行是排除一切断点&#xff0c;逐个排查也是办法&#xff0c;但是在事件函数多的情况下会很复杂且慢节奏&#xff0c;学会一次性清除所有很有必…

JavaWeb--Mybatis

一&#xff1a;Mybatis概述 1.Mybatis概念 MyBatis 是一款优秀的 持久层框架 &#xff0c;用于简化 JDBC 开发&#xff1b; MyBatis 本是 Apache 的一个开源项目 iBatis, 2010 年这个项目由 apache software foundation 迁移到了 google code&#xff0c;并且改名为 MyB…

OpenTenBase 开发环境搭建及Debug设置

最近有个 OpenTenBase开源核心贡献挑战赛 领导建议大家都去试试&#xff0c;我也去凑了下热闹&#xff0c;发现能力有限一时半会是搞不明白了&#xff0c;最多也就是能搞搞文档翻译&#xff0c;或者写点操作手册啥的。 不过不管怎么样&#xff0c;先把开发环境搭上&#xff0c;…

R语言的数据类型与数据结构:向量、列表、矩阵、数据框及操作方法

R语言的数据类型与数据结构&#xff1a;向量、列表、矩阵、数据框及操作方法 介绍向量列表矩阵数据框 介绍 R语言拥有丰富的数据类型和数据结构&#xff0c;以满足各类数据处理和分析的需求。本文将分享R语言中的数据类型&#xff0c;包括向量、列表、矩阵、数据框等&#xff…

vue组件之间通信方式汇总

方式1&#xff1a;props和$emit props和$emit仅仅限制在父子组件中使用 1.props&#xff1a;父组件向子组件传递数据 1.1 代码展示 <template><div><!-- 这是父组件 --><div>父组件中的基本数据类型age的值是:{{this.age}}</div><div>…

giffgaff怎么充值?giffgaff怎么续费?

-性价比高&#xff1a;0月租&#xff0c;免费接收短信&#xff0c;充值一次&#xff0c;接码可以用20年以上&#xff08;仅需半年保号一次&#xff09;&#xff0c;可能是国内性价比最高的接码实体卡&#xff01;-安全&#xff1a;实体卡无须担心因号码被风控&#xff0c;还可以…

面试经典150题【61-70】

文章目录 面试经典150题【61-70】61.旋转链表86.分隔链表104. 二叉树的最大深度100.相同的树226.翻转二叉树101.对称二叉树105.从前序与中序遍历序列构造二叉树106.从后序和中序遍历序列构造二叉树117.填充每个节点的下一个右侧节点指针II114.二叉树展开为链表 面试经典150题【…

PostgreSQL 流复制

文章目录 1.流复制介绍2.异步流复制2.1.主库部署2.2.备库部署2.3.测试 3.同步复制3.1.主库部署3.2.备库部署3.3.测试 4.主备切换 开源中间件 # PostgreSQLhttps://iothub.org.cn/docs/middleware/ https://iothub.org.cn/docs/middleware/postgresql/postgres-stream/1.流复制…

unity学习(53)——选择角色界面--分配服务器返回的信息

好久没写客户端了&#xff0c;一上手还不太适应 1.经过测试&#xff0c;成功登陆后&#xff0c;客户端请求list_request&#xff0c;成功返回&#xff0c;如下图&#xff1a; 可见此时model第三个位置的参数是1.也成功返回了所有已注册角色的信息。 2.之前已知创建的角色信息…

141 Linux 系统编程18 ,线程,线程实现原理,ps –Lf 进程 查看

一 线程概念 什么是线程 LWP&#xff1a;light weight process 轻量级的进程&#xff0c;本质仍是进程(在Linux环境下) 进程&#xff1a;独立地址空间&#xff0c;拥有PCB 线程&#xff1a;有独立的PCB&#xff0c;但没有独立的地址空间(共享) 区别&#xff1a;在于是否共…

html前端的几种加密/解密方式

HTML前端的加密解密方式有以下几种&#xff1a; 一、base64加密 Base64编码&#xff1a;Base64是一种将二进制数据转换为可打印字符的编码方式。在前端&#xff0c;可以使用JavaScript的btoa()函数进行Base64编码&#xff0c;使用atob()函数进行解码。 var str "hello…

uniapp发行H5获取当前页面query

阅读uni的文档大致可得通过 onLoad与 onShow()的形参都能获取页面传递的参数&#xff0c;例如在开发时鼠标移动到方法上可以看到此方法的简短介绍 实际这里说的是打开当前页面的参数&#xff0c;在小程序端的时候测试并无问题&#xff0c;但是发行到H5时首页加载会造成参数获取…

内容管理平台原来这么好用,优秀企业必备

内容管理平台是企业的强有力支持者&#xff0c;它可以使企业对旗下的各种网站、应用和其他数字内容进行集中管理&#xff0c;有效提高工作效率。对于企业的运营、市场推广和客户服务等各方面都有着重要的影响。今天&#xff0c;我们就来推荐三款值得尝试的内容管理平台。 首先…

论文的引用书写方法

前置操作 1、全选文献 2、在开始选项卡 段落功能区 选择编号功能 3、设置编号格式 [1] 论文的引用 1、光标放在需要引用论文的地方 2、选择引用选项卡 点击交叉引用 3、引用类型为编号项 引用内容为段落编号 选择需要的第几条参考文献