处理 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 中隐藏元素刷新闪烁问题
一、问题说明 页面刷新,原本隐藏的元素会一闪而过。 效果展示: 页面的导航栏通过路由跳转中携带的 meta 参数控制导航栏的 显示/隐藏,但在实践过程中发现,虽然元素隐藏了,但是刷新页面会出现闪烁的问题。 项目源码&…...
【MySQL】数据目录迁移
一、使用场景 使用该方法一般是数据目录所在磁盘不支持扩展,只能通过新加磁盘来扩展数据目录磁盘空间。通常是Windows服务器,或者是Linux服务器的mysql数据目录的磁盘没有使用lvm。 二、准备工作 1. 新磁盘初始化,达到可使用状态 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终端安全保障 资料获取:私信或者进主页。…...
INS淡绿色风格人像街拍Lr调色教程,手机滤镜PS+Lightroom预设下载!
调色介绍 INS 淡绿色风格人像街拍通过 Lightroom 调色可以营造出清新、自然、时尚的视觉效果。这种风格以淡绿色为主色调,给人一种宁静、舒适的感觉。 预设信息 调色风格:INS风格预设适合类型:人像,街拍,自拍&#…...
python 实现最小路径和算法
最小路径和算法介绍 最小路径和问题通常指的是在一个网格(如二维数组)中,找到从起点(如左上角)到终点(如右下角)的一条路径,使得路径上经过的元素值之和最小。这类问题可以通过多种…...
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+大恒相机相机回调方式总结
一、前言 大恒驱动安装完成后,在安装目录有SDK调用文档,里面有更详细的调用介绍,此文档对近期做的Demo做一个回顾性总结。 二、调用流程概述 三、针对性内容介绍: 1. 在执行相机操作之前,需要先执行此代码࿱…...
Python库pandas之六
Python库pandas之六 输入/输出read_sql函数应用实列 输入/输出 read_sql 函数 词法: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进行实例分割是一项具有挑战性的任务,因为YOLOv11通常是用PyTorch等深度学习框架实现的,而OpenCV本身并不直接支持加载和运行PyTorch模型。然而,可以通过一些间接的方法来实现这一目标&#x…...
PAT甲级-1122 Hamiltonian Cycle
题目 题目大意 给定一个图和几组顶点,判断每组顶点是否能构成一个哈密顿回路。 知识点 哈密顿回路满足几点要求:构成一个封闭环,并且经过所有顶点,每个顶点经过一次。 即满足第一个顶点值和最后一个顶点值相等;只有…...
Java 插入排序
插入排序(Insertion Sort)是一种简单直观的排序算法。它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入。以下是插入排序的Java实现: public class Inserti…...
随机掉落的项目足迹:Vue3中vite.config.ts配置代理服务器解决跨域问题
跨域问题产生的原因:浏览器同源策略 后面的通俗解释小标题下的内容是便于大家理解同源策略和跨域问题。 而同源策略和跨域问题这两个小标题下的内容虽然比较专业不容易阅读,但是还是建议大家花时间理解并记忆,因为这是前端面试中的常考点。…...
C++笔记之标准库和boost库中bind占位符_1的写法差异
C++笔记之标准库和boost库中bind占位符_1的写法差异 code review! 参考博文: C++新特性探究(十五):bind 在C++中,_1 和 std::placeholders::_1 都用于表示占位符,但它们有不同的上下文:...
二分查找
文章目录 1.算法思想2.代码实现(1)循环实现(2)递归实现 3.题目练习 1.算法思想 二分查找(折半查找):有序数组(升序或降序,可以不连续),每次缩小一半的区间。 时间复杂度:O(log n) 空间复杂度:循环实现是 O(1)…...
关注、取关、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!(暗神屏幕录制软件)专业高清屏幕录像软件,被誉为游戏视频三大神器之一。这款屏幕录制软件和游戏录制软件,拥有三大硬件加速技术,支持以超高清视频画质录制桌面和实况直播,超清视频画质&…...
胤娲科技:AI重塑会议——灵动未来,会议新纪元
你是否曾经历过这样的会议场景:会议纪要不准确,人名张冠李戴;错过会议,却无从回顾关键内容;会议效率低下,时间白白流逝? 这些问题仿佛成了现代会议的“顽疾”。然而,随着AI技术的飞速…...
Python画笔案例-080 绘制 颜色亮度测试
1、绘制 颜色亮度测试 通过 python 的turtle 库绘制 颜色亮度测试,如下图: 2、实现代码 绘制 颜色亮度测试,以下为实现代码: """颜色亮度测试.py本程序需要coloradd模块支持,请在cmd窗口,即命令提示符下输入pip install coloradd进行安装。本程序演示brig…...
MATLAB工具库:数据统计分析工具MvCAT、MhAST等
MATLAB工具库:数据统计分析工具MvCAT、MhAST等 工具1:Multivariate Copula Analysis Toolbox (MvCAT)MATLAB中运行 工具2:Multi-hazard Scenario Analysis Toolbox (MhAST) 参考 The University of California-软件库-Software 工具1…...
角色动画——RootMotion全解
1. Unity(2022)的应用 由Animtor组件控制 在Animation Clip下可进行详细设置 官方文档的介绍(Animation选项卡 - Unity 手册) 上述动画类型在Rag选项卡中设置: Rig 选项卡上的设置定义了 Unity 如何将变形体映射到导入模型中的网格,以便能够将其动画化。 对于人…...
KubeSphere 容器平台高可用:环境搭建与可视化操作指南
Linux_k8s篇 欢迎来到Linux的世界,看笔记好好学多敲多打,每个人都是大神! 题目:KubeSphere 容器平台高可用:环境搭建与可视化操作指南 版本号: 1.0,0 作者: 老王要学习 日期: 2025.06.05 适用环境: Ubuntu22 文档说…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制,因此这个了16进制的数据既可以翻译成为这个机器码,也可以翻译成为这个国标码,所以这个时候很容易会出现这个歧义的情况; 因此,我们的这个国…...
Cursor实现用excel数据填充word模版的方法
cursor主页:https://www.cursor.com/ 任务目标:把excel格式的数据里的单元格,按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例,…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下,无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作,还是游戏直播的画面实时传输,低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架,凭借其灵活的编解码、数据…...
相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了: 这一篇我们开始讲: 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下: 一、场景操作步骤 操作步…...
EtherNet/IP转DeviceNet协议网关详解
一,设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络,本网关连接到EtherNet/IP总线中做为从站使用,连接到DeviceNet总线中做为从站使用。 在自动…...
动态 Web 开发技术入门篇
一、HTTP 协议核心 1.1 HTTP 基础 协议全称 :HyperText Transfer Protocol(超文本传输协议) 默认端口 :HTTP 使用 80 端口,HTTPS 使用 443 端口。 请求方法 : GET :用于获取资源,…...
HubSpot推出与ChatGPT的深度集成引发兴奋与担忧
上周三,HubSpot宣布已构建与ChatGPT的深度集成,这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋,但同时也存在一些关于数据安全的担忧。 许多网络声音声称,这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...
关于easyexcel动态下拉选问题处理
前些日子突然碰到一个问题,说是客户的导入文件模版想支持部分导入内容的下拉选,于是我就找了easyexcel官网寻找解决方案,并没有找到合适的方案,没办法只能自己动手并分享出来,针对Java生成Excel下拉菜单时因选项过多导…...
Python网页自动化Selenium中文文档
1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API,让你使用Selenium WebDriver来编写功能/校验测试。 通过Selenium Python的API,你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...
