vue3 关于解决路由元信息和v-if刷新页面组件闪烁问题

qq_47470200

已于 2024-07-10 17:24:40 修改

阅读量593

点赞数 5

文章标签： vue.js 前端 javascript

于 2024-07-10 01:02:04 首次发布

本文链接：https://blog.csdn.net/qq_47470200/article/details/140309735

版权

问题描述

添加meta字段利用v-if=”! $ro u t e . m e t a . s h o wN a v “ 指令时造成闪烁问题 . 解决： v - i f = ”$ route.meta.showNav“ ，showNav默认为false，要显示的页面为true。（猜测可能与v-if动态编译有关，编译与获取showNav是同步的？)

解决方法：
 //利用全局守卫统一添加
  if (to.path === '/login') {
    // 如果需要，可以在to.meta中添加或修改字段
   // to.meta.showNav =false
  } else {
    to.meta.showNav =true
  }
	//全局组件
	<div  v-if="$route.meta.showNav">
	<example > </example>
``  </div>
原因试分析(希望有大佬指正):
    <div  v-if="未定义字段undefined">
	<example > </example>
``  </div> 
    此时不能渲染，undefined会被视为false，!undefined则为true。
//----------------------------------------
    当 showNav默认为true时
    <div  v-if="！$route.meta.showNav">
	<example > </example>
``  </div>
   则当页面刷新时发生闪烁。所以猜测动态编译过程中因为同步问题会被视为undefined(或者为空值?)。
   因此选择
    <div  v-if="$route.meta.showNav">
	<example > </example>
``  </div>
   showNav 默认为false ， 成功解决。 不知闪烁的具体原理为何，敬请指正。