处理 Vue3 中隐藏元素刷新闪烁问题

news2024/10/10 18:05:30

一、问题说明

页面刷新，原本隐藏的元素会一闪而过。

效果展示：

效果展示

页面的导航栏通过路由跳转中携带的 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>