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

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

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