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

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

news 2025/12/26 23:17:26

Ⅰ、前言

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

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

编程新知 2025/12/26 17:45:13

【Axure高保真原型】引导弹窗

今天和大家中分享引导弹窗的原型模板&#xff0c;载入页面后&#xff0c;会显示引导弹窗&#xff0c;适用于引导用户使用页面&#xff0c;点击完成后&#xff0c;会显示下一个引导弹窗&#xff0c;直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...

编程新知 2025/12/26 6:10:20

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/12/1 19:23:04

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/12/21 15:45:14

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/10/27 20:33:34

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

编程新知 2025/10/4 6:30:56

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2025/9/29 10:54:34

快刀集(1): 一刀斩断视频片头广告

一刀流&#xff1a;用一个简单脚本&#xff0c;秒杀视频片头广告&#xff0c;还你清爽观影体验。 1. 引子 作为一个爱生活、爱学习、爱收藏高清资源的老码农&#xff0c;平时写代码之余看看电影、补补片&#xff0c;是再正常不过的事。 电影嘛&#xff0c;要沉浸&#xff0c;…...

编程新知 2025/9/3 5:42:53

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

编程新知 2025/12/24 21:56:41

【UE5 C++】通过文件对话框获取选择文件的路径

目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 &#xff0c;这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器&#xff0c;右键点击 .uproject 文件&#xff0c;选择 "Generate Visual Studio project files"&#xff0c;重…...

编程新知 2025/12/24 23:39:44