处理 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 如何将变形体映射到导入模型中的网格,以便能够将其动画化。 对于人…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板,载入页面后,会显示引导弹窗,适用于引导用户使用页面,点击完成后,会显示下一个引导弹窗,直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》
引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...
JavaScript 中的 ES|QL:利用 Apache Arrow 工具
作者:来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗?了解下一期 Elasticsearch Engineer 培训的时间吧! Elasticsearch 拥有众多新功能,助你为自己…...
数据链路层的主要功能是什么
数据链路层(OSI模型第2层)的核心功能是在相邻网络节点(如交换机、主机)间提供可靠的数据帧传输服务,主要职责包括: 🔑 核心功能详解: 帧封装与解封装 封装: 将网络层下发…...
零基础设计模式——行为型模式 - 责任链模式
第四部分:行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习!行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想:使多个对象都有机会处…...
MySQL账号权限管理指南:安全创建账户与精细授权技巧
在MySQL数据库管理中,合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号? 最小权限原则…...
Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...
return this;返回的是谁
一个审批系统的示例来演示责任链模式的实现。假设公司需要处理不同金额的采购申请,不同级别的经理有不同的审批权限: // 抽象处理者:审批者 abstract class Approver {protected Approver successor; // 下一个处理者// 设置下一个处理者pub…...
处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的
修改bug思路: 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑:async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...
MFC 抛体运动模拟:常见问题解决与界面美化
在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...
