vue3切换路由时页面空白问题解决办法
作者：万物皆对象666
在使用Vue3时,有时页面修改后会出现空白,这篇文章主要介绍了vue3切换路由时页面空白问题解决办法,文中介绍的步骤可以有效解决页面空白问题,需要的朋友可以参考下
1.vue3页面空白不报错，刷新后显示正常
- 记录问题：vue3中修改当前页面代码保存后，回到页面显示空白，切换菜单页面同样显示空白，刷新页面后恢复显示正常。
- 解决方法：为router-view添加key :key="$route.fullPath"
- 添加位置：/layout/components/AppMain.vue文件
- 具体代码：
<template>
<section class="app-main">
<router-view v-slot="{ Component, route }" :key="$route.fullPath">
<transition :enter-active-class="animante" mode="out-in">
<keep-alive :include="tagsViewStore.cachedViews">
<component v-if="!route.meta.link" :is="Component" :key="route.path" />
</keep-alive>
</transition>
</router-view>
<iframe-toggle />
</section>
</template>注意：有使用layout封装布局的，是在layout下的主页面中的 router-view 添加标识，不是在src根目录下main.vue中修改（在这个文件修改会造成每次切换路由导航标签都会收起）
2.vue3切换路由后页面不报错显示空白，刷新后显示正常
- 记录问题：vue3中只切换路由后页面不报错显示空白，在该页面刷新后正常显示，切换路由又不显示问题。
- 解决方法：可以依次检查以下问题：①是否在根组件标签最外层包含了个最大的div盒子包裹内容。②看看是否在template标签下面直接有注释，如果有需要把注释写到div里面。（即根标签下不要直接有注释）
- 错误案例：
- <template>中间有多个div标签
- <template>与<div>之间有注释
错误写法（案例1）：
<template>
<div>布局1</div>
<div>布局2</div>
</template>正确写法（案例1）：
<template>
<div>
<div>布局1</div>
<div>布局2</div>
</div>
</template>错误写法（案例2）：
<template> <!-- 注释 --> <div> 开始布局 </div> <!-- 注释 --> </template>
正确写法（案例2）：
<template> <div> <!-- 注释 /> --> 开始布局 <!-- 注释 /> --> </div> </template>
总结
到此这篇关于vue3切换路由时页面空白问题解决办法的文章就介绍到这了,更多相关vue3切换路由页面空白内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！