当前位置： 首页 > news >正文

vue3 解决各场景 loading过度 ，避免白屏尴尬！

news 文章来源：https://blog.csdn.net/weixin_42232622/article/details/129753435 2025/5/20 5:27:50

Ⅰ、前言

  • 当我们每次打卡页面，切换路由，甚至于异步组件，都会有一个等待的时间 ；
  • 为了不白屏，提高用户体验，添加一个 loading 过度动画是 非常 常见的 ；
  • 那么这几种场景我们应该把 loading 加在哪里呢 ？

在这里插入图片描述

文章目录

      • Ⅰ、前言
      • Ⅱ、vue3 常见过度
        • 1、 首次打开页面时 loading
        • 2、 路由切换时、异步组件 loading
      • Ⅲ、 添加过度动画

Ⅱ、vue3 常见过度

针对以下 3 种情况 做了一下整理 👇

① 首次打开页面时；
② 路由切换时；
③ 异步组件显示时；

1、 首次打开页面时 loading

  • 在页面首次打开的加载内容，是最容易的，通过根目录 index.html文件
  • 在 <div id='app'> 里添加内容，就是过度内容
<body><div id="app"><h1>加载中......</h1></div><script type="module" src="/src/main.js"></script>
</body>
  • 当vue实例创建完成，通过.mount() 方法挂载到 id='app' 的div 里，会替换掉里的loading内容；

2、 路由切换时、异步组件 loading

  • 路由切换过度 需要先了解一个，vue3 的内置组件 <Suspense>；
  • <Suspense> 提供 2 个插槽 👇；
  • #default : 一个要加载的内容 ；
  • #fallback: 一个加载种显示的内容；
<Suspense><template #default><router-view /></template><template #fallback><h1>加载中......</h1></template>
</Suspense>

同理：( 异步组件的切换 ) 

<template><Suspense><template #default><AsyncComp  v-if = 'vitblie' /></template><template #fallback><h1>加载中......</h1></template></Suspense><button @click='open'> 切换 </button>
</template>
<script setup>import { defineAsyncComponent , ref } from 'vue';const asyncComp = defineAsyncComponent(()=>important('./asyncComp.vue));const vitblie = ref(false);function open(){vitblie.value = !vitblie.value;}
</script>
  • 异步组件也是可以使用相同的方法

Ⅲ、 添加过度动画

添加过度动画需要先了解 vue3 内置组件 <Component> 和 <Transition> 👇

  • <Component>: 非常简单只有一个 is 显示该组件， 可以用来组件切换 如：
 <template><Component :is="visible ? TestComp : '' " /> </template>
  • <Transition> : 里插入的内容 显示/隐藏 添加过度动画 ，通过 name 属性来拼接 class 如 :
 <template><transition name='anime'><TestComp v-if='visblte' /> </transition></template>
  • 设置样式通过 name 属性 这里

anime-enter-active: 过度态 ( 设置 隐藏 => 显示 过度的时间等参数)
anime-leave-active: 过度态 ( 设置 显示 => 隐藏 过度的时间等参数)


anime-enter-from => anime-enter-to 隐藏 => 显示 开始和结束的样式
anime-leave-from => anime-leave-to 显示 => 隐藏 开始和结束的样式

组合起来 👇

<template><router-view v-slot={ Component } ><transition name='anime'><component :is="Component" /><transition></router-view>
<template>
<style scoped>
.anime-enter-active,
.anime-leave-active {transition: all 1s;
}
.anime-leave-from { transform: translateY(0); }
.anime-leave-to { transform: translateY(-100%); }.anime-enter-from { transform: translateY(100%); }
.anime-enter-to { transform: translate(0); }
</style>

在这里插入图片描述

🎁🎁🎁🎁🎁 相关文章 : 🎁🎁🎁 🎁🎁 🎁🎁🎁 🎁🎁 🎁🎁🎁 🎁🎁 🎁🎁🎁 🎁🎁 🎁🎁🎁 🎁🎁

🎁Ⅰ. vue3 性能优化总汇 ------------------------------------------------------------------------------------------------🎁
🎁Ⅱ. vue2.7 过度指南 ----------------------------------------------------------------------------------------------------🎁
🎁Ⅲ. 升级vue3问题总汇 -------------------------------------------------------------------------------------------------🎁
🎁Ⅳ. vue3 配置 JSX语法 ------------------------------------------------------------------------------------------------🎁
🎁🎁 🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁 🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁🎁

相关文章：

vue3 解决各场景 loading过度 ，避免白屏尴尬！

Ⅰ、前言 当我们每次打卡页面&#xff0c;切换路由&#xff0c;甚至于异步组件&#xff0c;都会有一个等待的时间 &#xff1b;为了不白屏&#xff0c;提高用户体验&#xff0c;添加一个 loading 过度动画是 非常 常见的 &#xff1b;那么这几种场景我们应该把 loading 加在哪…...

编程日记 2023/4/15 19:17:15

基于sringboot和小程序实现高校食堂移动预约点餐系统演示【源码】

基于sringboot实现高校食堂移动预约点餐系统演示开发语言&#xff1a;Java 框架&#xff1a;ssm JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09; 数据库工具&#xff1a;Navicat11 开发软件&am…...

编程日记 2023/5/25 22:39:10

开源操作系统与Windows大比拼！

科技网站ZDNet近日撰文称&#xff0c;在一个用户为王的时代&#xff0c;操作系统们为了获得青睐都放下了身段&#xff0c;采用免费策略&#xff0c;但其中却有一个例外——Windows 10。这样的一反常理让许多人不看好Windows的未来&#xff0c;难道这个我们最熟悉的朋友真的会成…...

编程日记 2023/4/19 6:25:28

RTL8201 以太网PHY芯片 调试记录

一、概述 为了尽量给甲方降低成本&#xff0c;决定使用较低成本的PHY芯片RTL8201F-VB-CG芯片。移植官网的以太网demo程序&#xff0c;git上下载了一份很好看的rtl8201F的驱动程序&#xff0c;用来替换官方demo的lan8742程序。并没有直接通&#xff0c;于是开始了调试之路。 二…...

编程日记 2023/4/19 6:26:51

Java中Static关键字的五种用法详解

Static的五种用法大致如下&#xff1a; 修饰成员变量&#xff0c;使其成为类变量&#xff0c;也叫静态变量修饰成员方法&#xff0c;使其成为类方法修饰内部类&#xff0c;使其成为静态内部类静态代码块静态导包 直接一点&#xff0c;static关键字就是把属性和方法变为类相关&…...

编程日记 2023/4/15 19:18:26

WebSocket 测试工具

一、WebSocket 简介 WebSocket是一种在单个TCP连接上进行全双工通信的协议。 WebSocket使得客户端和服务器之间的数据交换变得更加简单&#xff0c;允许服务端主动向客户端推送数据。在WebSocket API中&#xff0c;浏览器和服务器只需要完成一次握手&#xff0c;两者之间就直…...

编程日记 2023/4/16 6:52:32

低代码开发的未来~

IT 团队依靠笨重的软件开发流程和劳动密集型的手工编码来构建有形、可靠和现代应用程序的时代即将结束。随着新自动化技术的兴起、渴望创新的客户和最终用户的期望和需求迅速提高以及开发人员的短缺&#xff0c;软件行业被迫寻求替代方法&#xff0c;不仅提供服务和产品&#x…...

编程日记 2023/4/19 6:30:04

蓝桥杯真题——模拟灌溉系统

尽量每天都自己写一遍模板&#xff0c;记住模板就好写了 以下内容直接在模板内进行 基本任务&#xff1a;要求“模拟智能灌溉系统”能够实现土壤湿度测量、土壤湿度和时间显示、湿度阈值设 定及存储等基本功能。通过电位器 Rb2 输出电压信号&#xff0c;模拟湿度传感器输出信号…...

编程日记 2023/4/12 15:00:53

【数据结构】双向链表实现

Yan-英杰的主页 悟已往之不谏 知来者之可追 C程序员&#xff0c;2024届电子信息研究生 目录 一、什么是双向链表 二、双向链表的实现 一、什么是双向链表 双向链表也叫双链表&#xff0c;是链表的一种&#xff0c;它的每个数据节点中都有两个指针&#xff0c;分别指向直接后…...

编程日记 2023/4/19 6:31:40

无公网IP，SSH远程连接Linux CentOS服务器【内网穿透】

文章目录1. Linux CentOS安装cpolar2. 创建TCP隧道3. 随机地址公网远程连接4. 固定TCP地址5. 使用固定公网TCP地址SSH远程本次教程我们来实现如何在外公网环境下&#xff0c;SSH远程连接家里/公司的Linux CentOS服务器&#xff0c;无需公网IP&#xff0c;也不需要设置路由器。 …...

编程日记 2023/4/12 15:02:44

CentOS 7+Docker搭建rabbitMQ无法访问15672端口

CentOS 7Docker搭建rabbitMQ无法访问15672端口 1.我拉取的镜像自带管理UI界面 所以不可能是没有开启管理UI界面的原因 2.防火墙关闭状态 所以也不是防火墙的问题 3.在虚拟机本机localhost:15672也访问不了 4.端口监听是正常的 5.最后发现我容器内curl能够通&#xff0c;容…...

编程日记 2023/4/16 6:52:28

面试官：如何保证接口幂等性？一口气说了9种方法！

本文已经收录到Github仓库&#xff0c;该仓库包含计算机基础、Java基础、多线程、JVM、数据库、Redis、Spring、Mybatis、SpringMVC、SpringBoot、分布式、微服务、设计模式、架构、校招社招分享等核心知识点&#xff0c;欢迎star~ Github地址 大家好&#xff0c;我是大彬~ 今…...

编程日记 2023/4/15 19:20:19

蓝桥杯刷题冲刺 | 倒计时14天

作者&#xff1a;指针不指南吗 专栏&#xff1a;蓝桥杯倒计时冲刺 &#x1f43e;马上就要蓝桥杯了&#xff0c;最后的这几天尤为重要&#xff0c;不可懈怠哦&#x1f43e; 文章目录1.最长递增2.走迷宫3.解立方根4.回文特判5.修改数组1.最长递增 题目 链接&#xff1a; 最长递增…...

编程日记 2023/3/27 15:15:03

【数据结构】树的概念

Halo&#xff0c;这里是Ppeua。平时主要更新C语言&#xff0c;C&#xff0c;数据结构算法......感兴趣就关注我吧&#xff01;你定不会失望。 &#x1f308;个人主页&#xff1a;主页链接 &#x1f308;算法专栏&#xff1a;专栏链接 我会一直往里填充内容哒&#xff01; &…...

编程日记 2023/3/27 15:10:02

Qt Glog toStdWString转char* 中文乱码

#include <QTextCodec>void LogWriter::init(void) {InitGoogleLogging("ui-fundus");char log_path[256] {0};FLAGS_stderrthreshold GLOG_INFO; // INFO WARNING ERROR FATAL, 是输出到stderr(app Output/cli)的阀值FLAGS_alsologtostderr false; // 当这…...

编程日记 2023/4/19 6:33:00

基于线性Kalman观测器(LKF)的2、4、7自由度悬架主动控制合集

目录 前言 1. 1/4车悬架仿真分析 2. 1/2车悬架仿真分析 3. 整车车悬架仿真分析 3.1 KF观测状态 3.2性能指标 4 .KF调参总结 5.文章总结 前言 对于kalman的原理介绍在上篇文章中已经做了详尽剖析&#xff0c;本篇进行实战&#xff0c;将其应用于悬架系统&#xff0c;其实…...

编程日记 2023/4/19 6:34:16

第二章 作业（6789B）【编译原理】

第二章 作业【编译原理】前言推荐第二章 作业678911最后前言 以下内容源自《编译原理》 仅供学习交流使用 推荐 无 第二章 作业 6 6.令文法G6为 N→D|ND D→0|1|2|3|4|5|6|7|8|9 (1)G6的语言L(G6)是什么? (2)给出句子0127、34和568的最左推导和最右推导。 &#xff08;…...

编程日记 2023/4/12 3:24:04

【java】连续最大和、统计回文

目录 1.连续最大和 2.统计回文 1.连续最大和 链接&#xff1a;连续最大和_牛客题霸_牛客网 (nowcoder.com) 描述&#xff1a;一个数组有 N 个元素&#xff0c;求连续子数组的最大和。 例如&#xff1a;[-1,2,1]&#xff0c;和最大的连续子数组为[2,1]&#xff0c;其和为 3 输…...

编程日记 2023/4/19 16:04:03

AI真的快让我们失业了，从ChatGPT到Midjourney

参考文章&#xff1a; https://mp.weixin.qq.com/s/3RdHPPhYgDfB6KY6Y9Sk2A跟AI有关的新闻&#xff0c;一个接着一个。前一天你还和往常一样进入梦乡&#xff0c;第二天醒来就能被新的AI新闻“炸弹”震得心惊。 以ChatGPT为代表的AI语言模型&#xff0c;以Midjourney为代表的…...

编程日记 2023/4/15 19:21:14

JVM学习 GC垃圾回收机制 (堆内存结构、GC分类、四大垃圾回收算法)

&#x1f916; 作者简介&#xff1a;努力的clz &#xff0c;一个努力编程的菜鸟 &#x1f423;&#x1f424;&#x1f425; &#x1f440; 文章专栏&#xff1a;《JVM 学习笔记》 &#xff0c;本专栏会专门记录博主在学习 JVM 中学习的知识点&#xff0c;以及遇到的问题。 …...

编程日记 2023/3/27 14:39:48

ChatGPT 有哪些神奇的使用方式？

ChatGPT在语言处理领域有着非常广泛的应用&#xff0c;可以用来进行语音识别、文本摘要、问答系统、机器翻译、智能客服、情感分析、智能写作等方面的应用。随着技术的不断发展和进步&#xff0c;ChatGPT在未来的应用场景和领域也将会有更加广泛的拓展和应用。ChatGPT可以应用于…...

编程日记 2023/4/12 15:06:25

【JavaEE】Java设计模式-单例模式（饿汉式与懒汉式）

目录 1.设计模式是啥&#xff1f; 2.单例模式 2.1什么是单例模式 2.2饿汉模式 2.3懒汉模式 3.懒汉模式与饿汉模式的区别 3.1.线程安全方面 3.2.资源加载和性能 4.如何保证懒汉模式的线程安全 1.设计模式是啥&#xff1f; 设计模式是前人经过总结&#xff0c;通过…...

编程日记 2023/4/15 19:22:58

(算法基础)朴素版Prim算法

适用情景在最小生成树问题当中&#xff0c;涉及到权重和最小值。并且这个图是稠密图(n^2 ~ m)的情形下时间复杂度O(N^2)算法解释先得知道一下什么是无向图的生成树&#xff0c;树总该知道的吧&#xff0c;生成树就是包含这个无向图中的n个点&#xff0c;并且有n-1条边&#xff…...

编程日记 2023/4/12 15:04:38

第十四届蓝桥杯三月真题刷题训练——第 23 天

目录 第 1 题&#xff1a;长草 题目描述 输入描述 输出描述 输入输出样例 运行限制 代码&#xff1a; 思路&#xff1a; 第 2 题&#xff1a;蓝肽子序列_LCS_最长公共子序列dp问题 题目描述 输入描述 输出描述 输入输出样例 运行限制 代码&#xff1a; 思路&am…...

编程日记 2023/3/27 14:19:40

基于springboot实现医院信息管理系统【源码+论文】

基于springboot实现医院信管系统演示开发语言&#xff1a;Java 框架&#xff1a;springboot JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xf…...

编程日记 2023/4/19 6:36:05

CODESYS增量式PID功能块(ST完整源代码）

增量式PID的详细算法公式和博途源代码，请参看下面的文章链接： 博途1200/1500PLC增量式PID算法(详细SCL代码)_博图scl语言pid增量编码器_RXXW_Dor的博客-CSDN博客SMART200PLC增量式PID可以参看下面这篇博文，文章里有完整的增量式PID算法公式，这里不在赘述西门子SMARTPLC增量…...

编程日记 2023/4/15 19:25:56

代码质量提升，代码扫描 review 之 Codacy 工具使用

目录一、什么是Codacy二、GitHub 上使用 Codacy三、Codacy上导入GitHub项目一、什么是Codacy Codacy 是用于代码 review 检测(即代码审查)的工具&#xff0c;目前支持对40多种编程语言检测&#xff0c;如 c、c、c#、java 、python、javascript 等。 Codacy 可用于 GitHub 和 …...

编程日记 2023/4/15 19:27:10

Centos Linux 正确安装 Redis 的方式

官方文档 Getting started with Redis | Redis 第一步 、下载源代码 源代码的下载方式有很多种&#xff0c;可以去源代码仓库下载&#xff0c;或者使用下面的命令下载 wget https://download.redis.io/redis-stable.tar.gz 第二步 、编译代码 tar -xzvf redis-stable.tar.…...

编程日记 2023/4/15 19:27:45

C++Primer第五版【阅读笔记】

CPrimer第五版 阅读笔记 第1章开始1.1 编写一个简单的C程序1.1.1 编译、运行程序1.2 初识输入输出第1章开始 学习一门新的程序设计语言的最好方法就是练习编写程序。 1.1 编写一个简单的C程序 每个C程序都包含一个或多个函数&#xff0c;其中一个必须命名为 main&#xff0c…...

编程日记 2023/4/11 7:01:57

ERD Online 4.0.11 在线数据库建模、元数据协作平台（免费、私有部署）

ERD Online 是全球第一个开源、免费在线数据建模、元数据管理平台。提供简单易用的元数据设计、关系图设计、SQL查询等功能&#xff0c;辅以版本、导入、导出、数据源、SQL解析、审计、团队协作等功能、方便我们快速、安全的管理数据库中的元数据。 4.0.11 ❝ :memo: fix(erd):…...

编程日记 2023/4/13 3:26:25