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

四、最终效果演示

最终效果演示

上一篇:【ShuQiHere】 理解内存的双通道与单通道:规格相同与不同的影响


下一篇:【TypeScript】知识点梳理(三)