如何处理 Vue3 中隐藏元素刷新闪烁问题
作者：阿莫、
本文主要探讨了网页刷新时,原本隐藏的元素会一闪而过的问题,以及尝试过的解决方案并未奏效,通过实例代码介绍了如何处理 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 中隐藏元素刷新闪烁问题的文章就介绍到这了,更多相关vue刷新闪烁内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！