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

处理 Vue3 中隐藏元素刷新闪烁问题

一、问题说明

页面刷新,原本隐藏的元素会一闪而过。

效果展示:

效果展示

页面的导航栏通过路由跳转中携带的 meta 参数控制导航栏的 显示/隐藏,但在实践过程中发现,虽然元素隐藏了,但是刷新页面会出现闪烁的问题。

项目源码:

在路由跳转中为 meta 添加参数,用于控制导航栏的 显示/隐藏:

// src/router/index.ts
const routes: Array<RouteRecordRaw> = [...{path: '/home',component: () => import('@/views/home/Home.vue'),},{path: '/login',component: () => import('@/views/login/Login.vue'),meta: { hideNav: true }},{path: '/register',component: () => import('@/views/login/Register.vue'),meta: { hideNav: true }},...
]
<!-- Main.vue -->
<template><div id="main"><nav id="navigation" v-if="!$route.meta.hideNav"><Aside></Aside></nav><div id="content"><router-view></router-view></div></div>
</template><script setup lang="ts">
import Aside from "../aside/Aside.vue";
</script>

二、尝试解决

起初查看网友分享的资料,尝试为导航栏添加 v-cloak 并设置样式:

<template><div id="main"><nav id="navigation" v-cloak v-if="!$route.meta.hideNav"><Aside></Aside></nav>...</div>
</template><style lang="less" scoped>
[v-cloak] {display: none;
}
</style>

在实践过程中发现,并无效果。

三、最终解决方案

解决思路:先隐藏导航栏,通过监听路由跳转的目的地来判断是否显示导航栏。该解决方案略显粗糙,粗糙的地方在于,需要手动排除部分页面,例如登录、注册页,根据自身项目,可能还需要手动排除其他页面(暂时没想到更好的解决方案≡(▔﹏▔)≡)。

<template><div id="main"><nav id="navigation" ref="navRef"><Aside></Aside></nav><div id="content"><router-view></router-view></div></div>
</template><script setup lang="ts">
import { ref, watch } from "vue";
import Aside from "../aside/Aside.vue";import { useRoute } from 'vue-router';
const route = useRoute();// 当用户跳转至登录页面时,F5刷新页面时,导航栏会出现闪烁,因此通过判断路由跳转的目的地来控制导航栏的 显示/隐藏
const navRef = ref();
watch(() => route.path,() => {if(route.path == '/login' || route.path == '/register') {navRef.value.style.display = "none";}else {navRef.value.style.display = "block";}
})</script><style lang="less" scoped>
#navigation {display: none;
}
</style>

四、最终效果演示

最终效果演示

相关文章:

处理 Vue3 中隐藏元素刷新闪烁问题

一、问题说明 页面刷新&#xff0c;原本隐藏的元素会一闪而过。 效果展示&#xff1a; 页面的导航栏通过路由跳转中携带的 meta 参数控制导航栏的 显示/隐藏&#xff0c;但在实践过程中发现&#xff0c;虽然元素隐藏了&#xff0c;但是刷新页面会出现闪烁的问题。 项目源码&…...

【MySQL】数据目录迁移

一、使用场景 使用该方法一般是数据目录所在磁盘不支持扩展&#xff0c;只能通过新加磁盘来扩展数据目录磁盘空间。通常是Windows服务器&#xff0c;或者是Linux服务器的mysql数据目录的磁盘没有使用lvm。 二、准备工作 1. 新磁盘初始化&#xff0c;达到可使用状态 2. 需要自己…...

【项目安全设计】软件系统安全设计规范和标准(doc原件)

1.1安全建设原则 1.2 安全管理体系 1.3 安全管理规范 1.4 数据安全保障措施 1.4.1 数据库安全保障 1.4.2 操作系统安全保障 1.4.3 病毒防治 1.5安全保障措施 1.5.1实名认证保障 1.5.2 接口安全保障 1.5.3 加密传输保障 1.5.4终端安全保障 资料获取&#xff1a;私信或者进主页。…...

INS淡绿色风格人像街拍Lr调色教程,手机滤镜PS+Lightroom预设下载!

调色介绍 INS 淡绿色风格人像街拍通过 Lightroom 调色可以营造出清新、自然、时尚的视觉效果。这种风格以淡绿色为主色调&#xff0c;给人一种宁静、舒适的感觉。 预设信息 调色风格&#xff1a;INS风格预设适合类型&#xff1a;人像&#xff0c;街拍&#xff0c;自拍&#…...

python 实现最小路径和算法

最小路径和算法介绍 最小路径和问题通常指的是在一个网格&#xff08;如二维数组&#xff09;中&#xff0c;找到从起点&#xff08;如左上角&#xff09;到终点&#xff08;如右下角&#xff09;的一条路径&#xff0c;使得路径上经过的元素值之和最小。这类问题可以通过多种…...

Vue3实现动态菜单功能

文章目录 0.效果演示1.搭建Vue3项目1.1 vite 脚手架创建 Vue3 项目1.2 设置文件别名1.3 安装配置 element-plus1.4 安装配置路由2.登录页面3.后台管理页面3.1 搭建后台框架3.2 左侧菜单栏3.3 header 用户信息3.4 主要内容3.5 footer4.配置静态路由5.记录激活菜单5.1 el-menu 绑…...

Qt+VS2019+大恒相机相机回调方式总结

一、前言 大恒驱动安装完成后&#xff0c;在安装目录有SDK调用文档&#xff0c;里面有更详细的调用介绍&#xff0c;此文档对近期做的Demo做一个回顾性总结。 二、调用流程概述 三、针对性内容介绍&#xff1a; 1. 在执行相机操作之前&#xff0c;需要先执行此代码&#xff1…...

Python库pandas之六

Python库pandas之六 输入/输出read_sql函数应用实列 输入/输出 read_sql 函数 词法&#xff1a;pandas.read_sql(sql, con, index_colNone, coerce_floatTrue, paramsNone, parse_datesNone, columnsNone, chunksizeNone, dtype_backend<no_default>, dtypeNone) rea…...

[C++]使用纯opencv部署yolov11-seg实例分割onnx模型

【算法介绍】 在C中使用纯OpenCV部署YOLOv11-seg进行实例分割是一项具有挑战性的任务&#xff0c;因为YOLOv11通常是用PyTorch等深度学习框架实现的&#xff0c;而OpenCV本身并不直接支持加载和运行PyTorch模型。然而&#xff0c;可以通过一些间接的方法来实现这一目标&#x…...

PAT甲级-1122 Hamiltonian Cycle

题目 题目大意 给定一个图和几组顶点&#xff0c;判断每组顶点是否能构成一个哈密顿回路。 知识点 哈密顿回路满足几点要求&#xff1a;构成一个封闭环&#xff0c;并且经过所有顶点&#xff0c;每个顶点经过一次。 即满足第一个顶点值和最后一个顶点值相等&#xff1b;只有…...

Java 插入排序

插入排序&#xff08;Insertion Sort&#xff09;是一种简单直观的排序算法。它的工作原理是通过构建有序序列&#xff0c;对于未排序数据&#xff0c;在已排序序列中从后向前扫描&#xff0c;找到相应位置并插入。以下是插入排序的Java实现&#xff1a; public class Inserti…...

随机掉落的项目足迹:Vue3中vite.config.ts配置代理服务器解决跨域问题

跨域问题产生的原因&#xff1a;浏览器同源策略 后面的通俗解释小标题下的内容是便于大家理解同源策略和跨域问题。 而同源策略和跨域问题这两个小标题下的内容虽然比较专业不容易阅读&#xff0c;但是还是建议大家花时间理解并记忆&#xff0c;因为这是前端面试中的常考点。…...

C++笔记之标准库和boost库中bind占位符_1的写法差异

C++笔记之标准库和boost库中bind占位符_1的写法差异 code review! 参考博文: C++新特性探究(十五):bind 在C++中,_1 和 std::placeholders::_1 都用于表示占位符,但它们有不同的上下文:...

二分查找

文章目录 1.算法思想2.代码实现(1)循环实现(2)递归实现 3.题目练习 1.算法思想 二分查找(折半查找)&#xff1a;有序数组(升序或降序&#xff0c;可以不连续)&#xff0c;每次缩小一半的区间。 时间复杂度&#xff1a;O(log n) 空间复杂度&#xff1a;循环实现是 O(1)&#xf…...

关注、取关、Redis实现共同关注、 博客推送与分页查询

Resourceprivate StringRedisTemplate stringRedisTemplate;Resourceprivate IUserService userService;Overridepublic Result follow(Long followUserId, Boolean isFollow) {//1.获取登陆的用户Long userId UserHolder.getUser().getId();//1.判断是关注还是取关if(isFollo…...

专业高清录屏软件!Mirillis Action v4.40 解锁版下载,小白看了都会的安装方法

Mirillis Action!&#xff08;暗神屏幕录制软件&#xff09;专业高清屏幕录像软件&#xff0c;被誉为游戏视频三大神器之一。这款屏幕录制软件和游戏录制软件&#xff0c;拥有三大硬件加速技术&#xff0c;支持以超高清视频画质录制桌面和实况直播&#xff0c;超清视频画质&…...

胤娲科技:AI重塑会议——灵动未来,会议新纪元

你是否曾经历过这样的会议场景&#xff1a;会议纪要不准确&#xff0c;人名张冠李戴&#xff1b;错过会议&#xff0c;却无从回顾关键内容&#xff1b;会议效率低下&#xff0c;时间白白流逝&#xff1f; 这些问题仿佛成了现代会议的“顽疾”。然而&#xff0c;随着AI技术的飞速…...

Python画笔案例-080 绘制 颜色亮度测试

1、绘制 颜色亮度测试 通过 python 的turtle 库绘制 颜色亮度测试,如下图: 2、实现代码 绘制 颜色亮度测试,以下为实现代码: """颜色亮度测试.py本程序需要coloradd模块支持,请在cmd窗口,即命令提示符下输入pip install coloradd进行安装。本程序演示brig…...

MATLAB工具库:数据统计分析工具MvCAT、MhAST等

MATLAB工具库&#xff1a;数据统计分析工具MvCAT、MhAST等 工具1&#xff1a;Multivariate Copula Analysis Toolbox (MvCAT)MATLAB中运行 工具2&#xff1a;Multi-hazard Scenario Analysis Toolbox (MhAST) 参考 The University of California-软件库-Software 工具1&#xf…...

角色动画——RootMotion全解

1. Unity(2022)的应用 由Animtor组件控制 在Animation Clip下可进行详细设置 ​ 官方文档的介绍(Animation选项卡 - Unity 手册) 上述动画类型在Rag选项卡中设置: Rig 选项卡上的设置定义了 Unity 如何将变形体映射到导入模型中的网格&#xff0c;以便能够将其动画化。 对于人…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

【HarmonyOS 5.0】DevEco Testing:鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

vscode(仍待补充)

写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

深度学习习题2

1.如果增加神经网络的宽度&#xff0c;精确度会增加到一个特定阈值后&#xff0c;便开始降低。造成这一现象的可能原因是什么&#xff1f; A、即使增加卷积核的数量&#xff0c;只有少部分的核会被用作预测 B、当卷积核数量增加时&#xff0c;神经网络的预测能力会降低 C、当卷…...

JVM 内存结构 详解

内存结构 运行时数据区&#xff1a; Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器&#xff1a; ​ 线程私有&#xff0c;程序控制流的指示器&#xff0c;分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 ​ 每个线程都有一个程序计数…...