自己创建网站教程,河南省建设厅官方网站李学军,北京海淀网络公司,东莞响应式网站哪家强一、问题说明
页面刷新#xff0c;原本隐藏的元素会一闪而过。
效果展示#xff1a; 页面的导航栏通过路由跳转中携带的 meta 参数控制导航栏的 显示/隐藏#xff0c;但在实践过程中发现#xff0c;虽然元素隐藏了#xff0c;但是刷新页面会出现闪烁的问题。
项目源码原本隐藏的元素会一闪而过。
效果展示 页面的导航栏通过路由跳转中携带的 meta 参数控制导航栏的 显示/隐藏但在实践过程中发现虽然元素隐藏了但是刷新页面会出现闪烁的问题。
项目源码
在路由跳转中为 meta 添加参数用于控制导航栏的 显示/隐藏
// src/router/index.ts
const routes: ArrayRouteRecordRaw [...{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 --
templatediv idmainnav idnavigation v-if!$route.meta.hideNavAside/Aside/navdiv idcontentrouter-view/router-view/div/div
/templatescript setup langts
import Aside from ../aside/Aside.vue;
/script二、尝试解决
起初查看网友分享的资料尝试为导航栏添加 v-cloak 并设置样式
templatediv idmainnav idnavigation v-cloak v-if!$route.meta.hideNavAside/Aside/nav.../div
/templatestyle langless scoped
[v-cloak] {display: none;
}
/style在实践过程中发现并无效果。
三、最终解决方案
解决思路先隐藏导航栏通过监听路由跳转的目的地来判断是否显示导航栏。该解决方案略显粗糙粗糙的地方在于需要手动排除部分页面例如登录、注册页根据自身项目可能还需要手动排除其他页面暂时没想到更好的解决方案≡(▔﹏▔)≡。
templatediv idmainnav idnavigation refnavRefAside/Aside/navdiv idcontentrouter-view/router-view/div/div
/templatescript setup langts
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;}
})/scriptstyle langless scoped
#navigation {display: none;
}
/style四、最终效果演示
