处理 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>

四、最终效果演示