场景描述
在vue3项目中,使用layout封装布局,页面跳转时左侧菜单栏展示正常,右侧出现白屏,刷新页面后正常显示。
解决方案
方案一:查看是在template标签下面是否有直接的注释,如果有需要把注释写到div里面。(即根标签下不要直接有注释)
错误案例
<template>
<!-- 我是注释 -->
<div id="app">
<div class="content">我是正文</div>
</div>
</template>
正确案例
<template>
<div id="app">
<!-- 我是注释 -->
<div class="content">我是正文</div>
</div>
</template>
方案二:在layout布局页面的router-view标签上加上 :key=“$route.fullPath” ,(请注意:如果有使用keep-alive页面缓存,使用此方法会导致缓存失效)
<router-view v-slot="{ Component, route }" :key="$route.fullPath">
<transition name="fade-transform" mode="out-in">
<keep-alive :include="tagsViewStore.cachedViews">
<component v-if="!route.meta.link" :is="Component" :key="route.path"/>
</keep-alive>
</transition>
</router-view>