Vue路由—进阶篇

文章目录

  • 路由守卫
    • 1、 路由全局守卫
      • 全局前置守卫:
      • 全局后置守卫:
    • 2、 路由独享守卫
    • 3、 组件内部守卫
      • 组件前置守卫:
      • 组件更新守卫:
      • 组件离开守卫:
  • 路由元信息
  • 路由组件过渡特效


本篇内容讲述了更多关于 Vue路由 这方面的知识点,如果大家对路由的基础知识了解不深的话,可以去看看我的另一篇博客 Vue路由基础篇


路由守卫

什么是路由守卫?
其实就是你进入或离开一个url地址的时候触发的方法,叫做路由守卫。

1、 路由全局守卫

全局前置守卫:

(进入路由前触发)

// router 就是你注册到根组件上的路由对象
router.beforeEach( (to,from)=>{console.log('要跳转了');return false;
} )
app.use(router)

beforeEach 这个方法有两个参数,第一个是将要跳转到的 路由信息,第二个是当前的路由信息。
to也就是去的意思,from有来自哪里的意思。
return false 则会取消当前的跳转行为
return 一个路由地址,则会跳转到此地址。
不写return,或者返回undefined 则不会取消当然得跳转行为,进行正常路由跳转

全局后置守卫:

(进入路由后触发)

// router 就是你注册到根组件上的路由对象
router.beforeEach((to, from) => {console.log('已经跳转了');});

beforeEach这个方法也有两个参数,第一个是将要跳转到的 路由信息,第二个是当前的路由信息。
此方法就不用写 return 值了,因为你已经完成了路由的跳转,来到了新的路由组件了。
当然,我们可以通过后置守卫完成一些别的逻辑,比如关闭计时器,修改页面标题等。

2、 路由独享守卫

顾名思义,就是某条路由自己的守卫,对应的,其他路由跳转就不会触发它。
而且,它只在不同路由跳转进来后触发。
如果只是单纯的参数改变,它也不会被触发

{path:'/mine',name:'mine',component: Mine,meta:{title:'我的'},// 此守卫只会在不同路由进入时触发。如果只是单纯的参数改变,并不会触发。beforeEnter:(to,from) => {console.log(to)}
},

3、 组件内部守卫

组件前置守卫:

// router 就是你注册到根组件上的路由对象
beforeRouterEnter( (to,from,next)=>{next(vm=>{// 通过vm 访问组件实例}
} )

在渲染该组件的对应路由前调用。
不能获取组件实例 this ,因为当次守卫被触发时,组件实例还没被创建!
但是,可以通过 next 方法,用回调函数的方式,拿的组件实例,这样就可以用组件实例的方法了。

组件更新守卫:

// router 就是你注册到根组件上的路由对象
beforeRouterUpdate( (to,from)=>{consolg.log('参数更新')
} )

当路由参数发生改变时,会触发此方法,组件不会重新创建,但会执行此方法

组件离开守卫:

// router 就是你注册到根组件上的路由对象
beforeRouterLeave( (to,from)=>{consolg.log('离开组件前')
} )

在离开组件前触发守卫,此方法同样可以通过 return 控制离开行为

路由元信息

如果想在路由上附加一个额外信息,可以在定义路由时,通过meta属性实现。

// router 就是你注册到根组件上的路由对象
{// 匹配所有没规定的路由path: "/:pathMatch(.*)*",name: "any",redirect: { path: "/404" },meta: {title: "任意",hidden: true}}

可以在路由守卫中 (to,from)参数中获取信息,完成逻辑需求

路由组件过渡特效

这个其实是 动态组件的灵活使用,算是一个小知识点。

<router-view v-slot="{ Component }">    <transition name="sss" mode="out-in"><component :is="Component"></component></transition>
</router-view>

router-view 会渲染当前路由的对应组件,此时,我们可以通过 v-solt 把组件暴露出来。
然后通过 component 动态组件 这个方法来 渲染暴露出来的组件。
在 component 套一个transition,则可以定义切换组件的过渡动画效果。
Vue过渡和动画有更详细的讲解,可以去了解一下。

总结
以上就是vue路由进阶篇的所有内容,关于路由的知识点还有很多,如果大家想进一步更深入的了解组件的更多知识,可以去Vue的官网进行更全面的了解。
我更希望本篇文章,能给一些刚学习vue的人带来逻辑思路上的灵感,本人也是一名新人,欢迎大家多多指教!

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

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

相关文章

HTML简单了解和基础知识记录

参考视频 html的用途 超文本标记语言&#xff08;英语&#xff1a;HyperText Markup Language&#xff0c;简称&#xff1a;HTML&#xff09;&#xff0c;用来显示网页的文字和框架结构&#xff0c;可以认为是网页的骨架。 标签/元素 用于定义文字图片连接等&#xff0c;分…

前端 uniapp 多端条件编译

条件编译是用特殊的注释作为标记&#xff0c;在编译时根据这些特殊的注释&#xff0c;将注释里面的代码编译到不同平台。 使用方法 以 #ifdef 或 #ifndef 加 %PLATFORM% 开头&#xff0c;以 #ifndef 结尾。 #ifdef&#xff1a;if defined 仅在某平台存在#ifndef&#xff1a;…

MacOS上升级Ruby版本

在MacOS上升级Ruby版本是一个涉及多个步骤的过程&#xff0c;这些步骤不仅要求技术操作准确&#xff0c;还需要考虑到与项目兼容性、依赖包管理以及系统安全性等多方面的因素。以下将详细介绍MacOS上升级Ruby版本的流程、注意事项以及可能的解决方案&#xff0c;确保整个升级过…

R 语言学习教程,从入门到精通,R 绘图饼图(23)

1、R 绘图 条形图 条形图&#xff0c;也称为柱状图条形图&#xff0c;是一种以长方形的长度为变量的统计图表。 条形图可以是水平或垂直的&#xff0c;每个长方形可以有不同的颜色。 R 语言使用 barplot() 函数来创建条形图&#xff0c;格式如下&#xff1a; barplot(H,xlab,…

JavaScript初级——DOM和事件简介

一、什么是DOM&#xff1f; 二、模型 三、对象的 HTML DOM 树 四、节点 浏览器已经为我们提供了文档节点对象&#xff0c;这个对象是window属性&#xff0c;可以再网页中直接使用&#xff0c;文档节点代表的是整个网页。 五、事件简介 事件&#xff0c;就是用户和浏览器之间的交…

最短路 - BellFord算法

有边数限制&#xff0c;存在负权边 题目描述 给定一个n个点m条边的有向图&#xff0c;图中可能存在重边和自环&#xff0c;边权可能为负数。 请你求出从1号点到n号点的最多经过k条边的最短距离&#xff0c;如果无法从1号点走到n号点&#xff0c;输出impossible. 注意:图中可能…

vue3+vite+cesium配置参考

在vite项目中使用Cesium的配置 关键&#xff1a; 资源目录的复制&#xff1b;CESIUM_BASE_URL的正确配置 //vite.config.js // ... // 安装打包复制资源插件&#xff0c;手动复制不需要 // npm i vite-plugin-static-copy import { viteStaticCopy } from vite-plugin-static-c…

linux+mysql+mongo+redis基础指令一文秒懂

Linux基础指令 基础指令&#xff1a; 安装网络工具&#xff0c;终端输入&#xff1a;sudo apt install net-tools&#xff0c;可以输入ifconfig查看虚拟机Ip 2. 适配客户机分配率&#xff0c;终端输入&#xff1a;sudo apt install open-vm-tools 3. 指令格式&#xff1a;指令名…

Linux系统下的容器安全:深入解析与最佳实践

在云计算和微服务架构的推动下&#xff0c;容器技术因其高效、可移植和灵活的特点&#xff0c;已经成为现代软件开发和部署的首选方案。然而&#xff0c;容器的广泛应用也带来了新的安全挑战&#xff0c;尤其是在Linux系统下&#xff0c;容器安全的实现和维护变得尤为重要。本文…

Ruby跨平台移动应用开发的新篇章

标题&#xff1a;Ruby跨平台移动应用开发的新篇章 在移动应用开发领域&#xff0c;Ruby作为一种高效灵活的编程语言&#xff0c;通过一系列框架和工具&#xff0c;成功地拓展了其应用边界。本文将详细介绍Ruby在移动应用开发中的应用&#xff0c;特别是跨平台解决方案&#xf…

C++ 设计模式——单例模式

单例模式 C 设计模式——单例模式1. 单例模式的基本概念与实现2. 多线程环境中的问题3. 内存管理问题1. 内存泄漏风险2. 自动释放策略3. 垃圾回收机制4. 嵌套类与内存管理 4. UML 图UML 图解析 优缺点适用场景总结 C 设计模式——单例模式 单例模式&#xff08;Singleton Patt…

【Redis】渐进式遍历和数据库管理

渐进式遍历和数据库管理 渐进式遍历scan 数据库管理切换数据库清除数据库 渐进式遍历 Redis 使⽤ scan 命令进⾏渐进式遍历键&#xff0c;进⽽解决直接使⽤ keys 获取键时可能出现的阻塞问题。每次 scan 命令的时间复杂度是 O(1)&#xff0c;但是要完整地完成所有键的遍历&…

360发布FancyVideo:通过跨帧文本指导实现动态且一致的视频生成SOTA!

文章链接&#xff1a;https://arxiv.org/pdf/2408.08189 项目链接&#xff1a;https://360cvgroup.github.io/FancyVideo/ 亮点直击 本文介绍了FancyVideo&#xff0c;据众所知的首个探索T2V任务中跨帧文本指导的开创性尝试。该方法为增强当前的文本控制方法提供了新的视角。 …

EmguCV学习笔记 VB.Net 6.5 凸包和凸缺陷

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 EmguCV是一个基于OpenCV的开源免费的跨平台计算机视觉库,它向C#和VB.NET开发者提供了OpenCV库的大部分功能。 教程VB.net版本请访问…

git远程仓库关联切换迁移

上一篇有关git基础设置文章地址&#xff1a; https://blog.csdn.net/lareinax5/article/details/124271339 关于两个仓库迁移&#xff0c;使用&#xff1a; 一、本地仓库文件关联远程仓库 1.先进入你要上传的文件夹&#xff1a; cd /path/to/your/folder2.初始化仓库、查看…

组合的输出-深度优先搜索

组合的输出 https://www.luogu.com.cn/problem/P1157 #include<bits/stdc.h> using namespace std; int n,r; bool v[50]; int f[50]; //now 用哪个数填 l填第几个空 void dfs(int now,int pos){ if(posr1){//r个空填满 for(int i1;i<r;i){ printf(“%3d”,f[i]); } …

OpenCV c++ 实现图像马赛克效果

VS2022配置OpenCV环境 关于OpenCV在VS2022上配置的教程可以参考&#xff1a;VS2022 配置OpenCV开发环境详细教程 图像马赛克 图像马赛克&#xff08;Image Mosaic&#xff09;的原理基于将图像的特定区域替换为像素块&#xff0c;这些像素块可以是纯色或者平均色&#xff0c…

SpringMVC核心机制环境搭建

文章目录 1.SpringMVC执行流程1.基础流程图2.详细流程图 2.安装Tomcat1.下载2.解压到任意目录即可3.IDEA配置Tomcat1.配置Deloyment2.配置Server 3.创建maven项目1.创建sun-springmvc模块&#xff08;webapp&#xff09;2.查看是否被父模块管理3.pom.xml引入依赖4.目录5.SunDis…

【Redis】Redis数据结构——Hash 哈希

哈希 命令hsethgethexistshdelhkeyshvalshgetallhmgethlenhsetnxhincrbyhincrbyfloat命令小结 内部编码使用场景缓存⽅式对⽐ ⼏乎所有的主流编程语⾔都提供了哈希&#xff08;hash&#xff09;类型&#xff0c;它们的叫法可能是哈希、字典、关联数组、映射。在 Redis 中&#…

一拖二快充线市场需求 - LDR6020

一拖二快充线市场需求与LDR6020应用快充线市场推广 随着科技的飞速发展&#xff0c;智能设备已成为我们日常生活中不可或缺的一部分。从智能手机到平板电脑&#xff0c;再到笔记本电脑&#xff0c;这些设备极大地丰富了我们的生活方式&#xff0c;但同时也带来了一个普遍的问题…