vue3页面跳转白屏

场景描述

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