快捷導(dǎo)航

如何處理?Vue3?中隱藏元素刷新閃爍問題

更新時(shí)間：2024年10月12日 11:56:42 作者：阿莫、

本文主要探討了網(wǎng)頁(yè)刷新時(shí),原本隱藏的元素會(huì)一閃而過的問題,以及嘗試過的解決方案并未奏效,通過實(shí)例代碼介紹了如何處理?Vue3?中隱藏元素刷新閃爍問題,感興趣的朋友跟隨小編一起看看吧

一、問題說明

頁(yè)面刷新，原本隱藏的元素會(huì)一閃而過。

效果展示：

頁(yè)面的導(dǎo)航欄通過路由跳轉(zhuǎn)中攜帶的 meta 參數(shù)控制導(dǎo)航欄的顯示/隱藏，但在實(shí)踐過程中發(fā)現(xiàn)，雖然元素隱藏了，但是刷新頁(yè)面會(huì)出現(xiàn)閃爍的問題。

項(xiàng)目源碼：

在路由跳轉(zhuǎn)中為 meta 添加參數(shù)，用于控制導(dǎo)航欄的顯示/隱藏：

// 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>

二、嘗試解決

起初查看網(wǎng)友分享的資料，嘗試為導(dǎo)航欄添加 v-cloak 并設(shè)置樣式：

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

在實(shí)踐過程中發(fā)現(xiàn)，并無(wú)效果。

三、最終解決方案

解決思路：先隱藏導(dǎo)航欄，通過監(jiān)聽路由跳轉(zhuǎn)的目的地來判斷是否顯示導(dǎo)航欄。該解決方案略顯粗糙，粗糙的地方在于，需要手動(dòng)排除部分頁(yè)面，例如登錄、注冊(cè)頁(yè)，根據(jù)自身項(xiàng)目，可能還需要手動(dòng)排除其他頁(yè)面（暫時(shí)沒想到更好的解決方案≡(▔﹏▔)≡）。

<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();
// 當(dāng)用戶跳轉(zhuǎn)至登錄頁(yè)面時(shí)，F(xiàn)5刷新頁(yè)面時(shí)，導(dǎo)航欄會(huì)出現(xiàn)閃爍，因此通過判斷路由跳轉(zhuǎn)的目的地來控制導(dǎo)航欄的 顯示/隱藏
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>