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

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

news 2025/12/27 0:59:38

Ⅰ、前言

  • 当我们每次打卡页面，切换路由，甚至于异步组件，都会有一个等待的时间 ；
  • 为了不白屏，提高用户体验，添加一个 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

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2025/12/22 21:48:33

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

编程新知 2025/10/8 10:56:25

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2025/12/21 9:09:26

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

编程新知 2025/12/25 4:21:23

江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命

在华东塑料包装行业面临限塑令深度调整的背景下&#xff0c;江苏艾立泰以一场跨国资源接力的创新实践&#xff0c;重新定义了绿色供应链的边界。 跨国回收网络&#xff1a;废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点&#xff0c;将海外废弃包装箱通过标准…...

编程新知 2025/12/26 15:42:06

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

编程新知 2025/12/16 23:25:05

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

编程新知 2025/12/25 18:22:43

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2025/12/14 23:17:22

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

编程新知 2025/11/28 5:32:31

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发&#xff0c;后来由Pivotal Software Inc.&#xff08;现为VMware子公司&#xff09;接管。RabbitMQ 是一个开源的消息代理和队列服务器&#xff0c;用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2025/12/21 2:46:44