切换路由时页面空白问题（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>　

 ~一位热衷于技术分享的码仔~