场景描述

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