处理 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 如何将变形体映射到导入模型中的网格,以便能够将其动画化。 对于人…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师,让萌系Otto机器人🔥玩出智能新花样!开整!” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制(TuyaAI…...
[Java恶补day16] 238.除自身以外数组的乘积
给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O(n) 时间复杂度…...
学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”
2025年#高考 将在近日拉开帷幕,#AI 监考一度冲上热搜。当AI深度融入高考,#时间同步 不再是辅助功能,而是决定AI监考系统成败的“生命线”。 AI亮相2025高考,40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕,江西、…...
JavaScript基础-API 和 Web API
在学习JavaScript的过程中,理解API(应用程序接口)和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能,使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...
使用LangGraph和LangSmith构建多智能体人工智能系统
现在,通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战,比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...
Webpack性能优化:构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果:Webpack 4比Webpack 3构建时间降低60%-98%。原因: V8引擎优化(for of替代forEach、Map/Set替代Object)。默认使用更快的md4哈希算法。AST直接从Loa…...
【堆垛策略】设计方法
堆垛策略的设计是积木堆叠系统的核心,直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法,涵盖基础规则、优化算法和容错机制: 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则: 大尺寸/重量积木在下…...
