Vue.js入门系列(二十九):深入理解编程式路由导航、路由组件缓存与路由守卫

个人名片
在这里插入图片描述
🎓作者简介:java领域优质创作者
🌐个人主页:码农阿豪
📞工作室:新空间代码工作室(提供各种软件服务)
💌个人邮箱:[2435024119@qq.com]
📱个人微信:15279484656
🌐个人导航网站:www.forff.top
💡座右铭:总有人要赢。为什么不能是我呢?

  • 专栏导航:

码农阿豪系列专栏导航
面试专栏:收集了java相关高频面试题,面试实战总结🍻🎉🖥️
Spring5系列专栏:整理了Spring5重要知识点与实战演练,有案例可直接使用🚀🔧💻
Redis专栏:Redis从零到一学习分享,经验总结,案例实战💐📝💡
全栈系列专栏:海纳百川有容乃大,可能你想要的东西里面都有🤸🌱🚀

目录

      • Vue.js入门系列(二十九):深入理解编程式路由导航、路由组件缓存与路由守卫
        • 引言
      • 一、编程式路由导航
        • 1.1 什么是编程式路由导航?
        • 1.2 基本用法
        • 1.3 `replace`与`push`的区别
      • 二、缓存路由组件
        • 2.1 什么是路由组件缓存?
        • 2.2 使用`<keep-alive>`缓存组件
        • 2.3 控制缓存的组件
      • 三、两个新的生命周期钩子
        • 3.1 `activated`与`deactivated`钩子
      • 四、全局前置路由守卫
        • 4.1 什么是路由守卫?
        • 4.2 定义全局前置守卫
        • 4.3 `next`函数
      • 五、全局后置路由守卫
        • 5.1 定义全局后置守卫
      • 六、总结

Vue.js入门系列(二十九):深入理解编程式路由导航、路由组件缓存与路由守卫

引言

在Vue.js应用中,Vue Router提供了强大的路由管理功能,支持多种导航方式、组件缓存和生命周期钩子,以及全局路由守卫。这些功能对于构建复杂应用至关重要。在本文中,我们将详细探讨编程式路由导航、路由组件缓存、两个新的生命周期钩子,以及全局前置和后置路由守卫的使用。


一、编程式路由导航

1.1 什么是编程式路由导航?

编程式路由导航是指使用JavaScript代码通过Vue Router进行导航,而不是依赖于模板中的<router-link>。这种方式提供了更大的灵活性,允许我们在代码逻辑中控制路由的跳转。

1.2 基本用法

Vue Router 提供了this.$router.push()this.$router.replace()方法,用于在代码中执行路由导航。

// 导航到指定路径
this.$router.push('/about');// 使用命名路由
this.$router.push({ name: 'user', params: { id: 123 } });// 带查询参数的导航
this.$router.push({ path: '/search', query: { q: 'Vue.js' } });
1.3 replacepush的区别

replacepush 的主要区别在于历史记录的处理方式:

  • push 会在浏览器历史记录中添加一个新的记录。
  • replace 则会替换当前的历史记录。
// 替换当前的路由
this.$router.replace({ name: 'home' });

replace通常用于需要覆盖当前页面而不想让用户回到前一页面的场景中。


二、缓存路由组件

2.1 什么是路由组件缓存?

在某些场景下,我们希望路由组件在被切换出去时不被销毁,再次切换回来时能够保留其状态。Vue 提供了<keep-alive>组件用于缓存这些路由组件。

2.2 使用<keep-alive>缓存组件

通过在<router-view>外层包裹<keep-alive>组件,我们可以实现路由组件的缓存。

<template><div id="app"><router-link to="/home">Home</router-link><router-link to="/about">About</router-link><keep-alive><router-view></router-view></keep-alive></div>
</template>

在这个示例中,/home/about两个路由对应的组件在被切换出去时不会被销毁,当用户返回时,这些组件会保留之前的状态。

2.3 控制缓存的组件

可以通过组件的name属性和<keep-alive>includeexclude属性来精确控制哪些组件需要被缓存。

<keep-alive include="home"><router-view></router-view>
</keep-alive>

在这个例子中,只有名称为home的组件会被缓存,其他组件不会。


三、两个新的生命周期钩子

3.1 activateddeactivated钩子

在使用<keep-alive>缓存组件时,Vue 提供了两个新的生命周期钩子来处理组件的激活与停用:

  • activated:当组件从缓存中激活时调用。
  • deactivated:当组件被缓存时调用,而不是被销毁。
export default {data() {return {message: 'Hello'};},activated() {console.log('Component activated');},deactivated() {console.log('Component deactivated');}
};

这些钩子非常适合在组件需要在激活或停用时执行特定逻辑的场景,如重新加载数据或暂停动画。


四、全局前置路由守卫

4.1 什么是路由守卫?

路由守卫是 Vue Router 提供的一种机制,它允许我们在路由导航发生之前或之后执行一些逻辑,比如权限验证、日志记录或数据预加载。

4.2 定义全局前置守卫

全局前置守卫通过router.beforeEach方法定义,它会在每次路由导航开始时触发。

const router = new VueRouter({ ... });router.beforeEach((to, from, next) => {console.log('Global Before Each');// 执行一些逻辑,例如权限验证if (to.meta.requiresAuth && !isAuthenticated()) {next('/login'); // 重定向到登录页面} else {next(); // 继续导航}
});

在这个例子中,守卫检查目标路由是否需要认证,如果需要且用户未认证,则重定向到登录页面,否则继续导航。

4.3 next函数

在路由守卫中,next函数非常重要,它决定了导航的行为:

  • next():继续导航。
  • next(false):中断当前的导航。
  • next('/path'):跳转到一个新的路径。
  • next(new Error('error message')):导航终止,并且会传递一个错误给router.onError()

五、全局后置路由守卫

5.1 定义全局后置守卫

全局后置守卫通过router.afterEach方法定义,它在每次路由导航结束时触发。

router.afterEach((to, from) => {console.log('Global After Each');// 例如,记录页面访问日志
});

与前置守卫不同,后置守卫不接受next参数,也不会影响导航的进行。它通常用于执行一些与导航结束后相关的逻辑,如记录页面访问、修改页面标题等。


六、总结

通过本文的学习,你应该掌握了以下关键点:

  • 编程式路由导航:理解了如何使用pushreplace方法在代码中进行路由导航,并掌握了replace的应用场景。
  • 缓存路由组件:学会了使用<keep-alive>组件缓存路由组件,理解了activateddeactivated生命周期钩子的作用。
  • 全局前置路由守卫:掌握了如何使用beforeEach方法定义全局前置守卫,并在导航开始时执行权限验证或其他逻辑。
  • 全局后置路由守卫:了解了如何使用afterEach方法定义全局后置守卫,在导航结束后执行页面日志记录等操作。

这些功能为 Vue.js 应用的路由管理提供了更大的灵活性和控制能力,使得我们能够构建更加复杂和健壮的单页应用。在接下来的博客中,我们将继续深入探讨 Vue Router 的其他高级功能和实际应用场景。如果你有任何疑问或需要进一步讨论,欢迎在评论区留言。感谢你的阅读,期待在下一篇博客中继续与大家分享更多 Vue.js 和 Vue Router 的开发技巧与经验!

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

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

相关文章

pikachu下

CSRF(跨站请求伪造) CSRF(get) url变成了这样了&#xff0c;我们就可以新开个页面直接拿url去修改密码 http://pikachu-master/vul/csrf/csrfget/csrf_get_login.php?username1&password2&submitLogin CSRF(post&#xff09; 这里只是请求的方式不同&#xff0c;…

简洁明了!中缀表达式转为后缀表达式规则及代码

简单来说&#xff0c;就是弄两个栈&#xff0c;判断执行&#xff1a; 上代码&#xff1a; #include<iostream> #include<stack> #include<cstring> using namespace std; stack<char>s1,s2; char now; int main(){string c;cin>>c;for(int i0;…

Linux 开发工具(vim、gcc/g++、make/Makefile)+【小程序:进度条】-- 详解

目录 一、Linux软件包管理器 - yum&#xff08;ubuntu用apt代替yum&#xff09;1、Linux下安装软件的方式2、认识 yum3、查找软件包4、安装软件5、如何实现本地机器和云服务器之间的文件互传 二、Linux编辑器 - vim1、vim 的基本概念2、vim 下各模式的切换3、vim 命令模式各命令…

形式向好、成本较低、可拓展性较高的名厨亮灶开源了

简介 AI视频监控平台, 是一款功能强大且简单易用的实时算法视频监控系统。愿景在最底层打通各大芯片厂商相互间的壁垒&#xff0c;省去繁琐重复的适配流程&#xff0c;实现芯片、算法、应用的全流程组合&#xff0c;减少企业级应用约 95%的开发成本&#xff0c;在强大视频算法加…

电子连接器温升仿真教程 一

电子连接器温升是指电子连接器的所有端子在施加额定电载荷的情况下,经过一段时间后,达成热平衡,连接器局部温度不再继续升高,此时规定测试点的温度与测试环境温度的差值。连接器的温升规格值因其应用环境不同,而不同。工业应用,且不与人体接触的电子连接器一般允许温升会…

mybatis 查询Not Found TableInfoCache

近期在工程迁移中遇到一个mybatis查询的问题&#xff0c;检查代码没有问题&#xff0c;但是报Not Found TableInfoCache 解决过程 是不是数据库对应表错误或者实体类指定的表名错误 查看配置文件链接的数据源是否正确TableName中指定的表名然后去数据库看一下是否存在 如果…

【C++】模板进阶:深入解析模板特化

C语法相关知识点可以通过点击以下链接进行学习一起加油&#xff01;命名空间缺省参数与函数重载C相关特性类和对象-上篇类和对象-中篇类和对象-下篇日期类C/C内存管理模板初阶String使用String模拟实现Vector使用及其模拟实现List使用及其模拟实现容器适配器Stack与Queue 本章将…

SQL进阶技巧:如何将字符串数组清洗为简单map结构? | translate + regexp_replace方法

目录 0 场景描述 1 数据准备 2 问题分析 2.1 方法1 特征法-通用解法 2.2 方法2枚举法(不通用) 3 小结 ~~END~~ 如果觉得本文对你有帮助,那么不妨也可以选择去看看我的博客专栏 ,部分内容如下: 数字化建设通关指南专栏原价99,现在活动价29.9,按照阶梯式增长,直到恢…

Linux命令分享 四 (ubuntu 16.04)(vi操作文件)

1、su 切换用户 su - 用户名 切换到该用户并将目录切换至该用户的主目录 **注意该语句执行后需要输入密码&#xff0c;输入密码时终端不回显&#xff08;不会显示你输入的密码&#xff09;&#xff0c;输完直接回车即可 su 用户名 切换用户但不切换目录 su - root su root **注…

c++20 std::format 格式化说明

在标头<format>定义 ()功能很强大&#xff0c;它把字符串当成一个模板&#xff0c;通过传入的参数进行格式化&#xff0c;并且使用大括号‘{}’作为特殊字符代替‘%’。 1、基本用法 &#xff08;1&#xff09;不带编号&#xff0c;即“{}”&#xff08;2&#xff09;带…

2024年【浙江省安全员-C证】考试试卷及浙江省安全员-C证模拟考试题库

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 浙江省安全员-C证考试试卷是安全生产模拟考试一点通总题库中生成的一套浙江省安全员-C证模拟考试题库&#xff0c;安全生产模拟考试一点通上浙江省安全员-C证作业手机同步练习。2024年【浙江省安全员-C证】考试试卷及…

arcgisPro修改要素XY容差

1、在arcgisPro中XY容差的默认值为1个毫米&#xff0c;及0.001米。为了更精细的数据&#xff0c;需要提高这个精度&#xff0c;如何提高呢&#xff1f; 2、如果直接在数据库下新建要素类&#xff0c;容差只能调至0.0002米。所以&#xff0c;需要在数据库下新建要素数据集。 3…

安全工具 | 使用Burp Suite的10个小tips

Burp Suite 应用程序中有用功能的集合 img Burp Suite 是一款出色的分析工具&#xff0c;用于测试 Web 应用程序和系统的安全漏洞。它有很多很棒的功能可以在渗透测试中使用。您使用它的次数越多&#xff0c;您就越发现它的便利功能。 本文内容是我在测试期间学到并经常的主要…

Gradio 中如何让 Chatbot 自动滚动

在 Gradio 中&#xff0c; Chatbot 是对话组件&#xff0c;接受 history 参数&#xff0c;在目前版本中 &#xff08;gradio4.44.0&#xff09;&#xff0c;不支持自动滚动&#xff0c;用起来很不方便&#xff0c;该功能在社区中已经提出了&#xff0c;目前该功能还没有发布。本…

[000-01-008].第05节:OpenFeign特性-重试机制

我的后端学习大纲 SpringCloud学习大纲 1.1.重试机制的默认值&#xff1a; 1.重试机制默认是关闭的&#xff0c;给了默认值 1.2.测试重试机制的默认值&#xff1a; 1.3.开启Retryer功能&#xff1a; 1.修改配置文件YML的配置&#xff1a; 2.新增配置类&#xff1a; packa…

如何用 Helm Chart 安装指定版本的 GitLab Runner?

本分分享如何使用 Helm 来在 Kubernetes 集群上安装极狐GitLab Runner。整体步骤分为&#xff1a;Helm 的安装、vaules.yaml 文件的配置、Runner 的安装、Runner 的测试。 极狐GitLab 为 GitLab 在中国的发行版&#xff0c;中文版本对中国用户更友好。极狐GitLab 支持一键私有…

2024.9最新:CUDA安装,pytorch库安装

目录 一、CUDA安装 1.查看自己电脑适配的CUDA的最高版本 2.安装CUDA 3.检查环境变量是否配置&#xff0c;安装是否成功 二、pytorch库安装 1.pytorch库下载 2.选择合适的版本 3.查看版本 一、CUDA安装 1.查看自己电脑适配的CUDA的最高版本 在命令提示符里输入nvidia-…

股指期货的详细玩法功能与应用解析

股指期货作为一种重要的金融衍生工具&#xff0c;为投资者提供了多样化的投资和风险管理手段。本文将详细探讨股指期货的三大主要功能&#xff1a;风险规避、价格发现和资产配置。 第一&#xff0c;风险规避功能 1.套期保值&#xff1a;股指期货的风险规避功能主要通过套期保值…

pytorch快速入门(一)—— 基本工具及平台介绍

前言 该pytorch学习笔记应该配合b站小土堆的《pytorch深度学习快速入门教程》使用 环境配置&#xff1a;Anaconda Python编译器&#xff1a;pycharm、jupyter 两大法宝函数 dir&#xff08;&#xff09;&#xff1a;知道包中有什么东西&#xff08;函数 / 属性..…

基于SpringBoot的招生宣传管理系统【附源码】

基于SpringBoot的招生宣传管理系统&#xff08;源码L文说明文档&#xff09; 目录 4 系统设计 4.1 系统概述 4.2系统功能结构设计 4.3数据库设计 4.3.1数据库E-R图设计 4.3.2 数据库表结构设计 5 系统实现 5.1管理员功能介绍 5.1.1管理员登录 …