关于vue3切换空白页问题解决

qq_351754782026-01-28 8:41

记录问题：vue3中修改当前页面代码保存后，回到页面显示空白；切换菜单页面同样显示空白，刷新页面后恢复显示正常。
解决方法：为router-view添加key :key="$route.fullPath"（非根组件）

在router-view 中给路由添加唯一标识key

理由：

①不设置key，vue会复用相同组件，在路由来回切换时会导致页面不刷新，因为不再重新创建实例不再执行created 和 mounted钩子函数；

②设置key，切换路由时key不同，相关的钩子函数被正确触发，组件被重新创建，重新创建实例。

注：项目若使用layout封装布局，要在layout文件夹下的主页面的router-view上加key，例如我的是src\layout\components\AppMain.vue。刚开始我在src\App.vue中的router-view上添加key，也可以达到效果，但是切换页面会导致导航栏收起再打开，视觉效果不好（具体文件路径以自己项目为准）

原因：

①在src\App.vue中添加，影响整个应用范围内的路由组件，包括导航栏都会被重新创建，所以导航栏会关闭再打开；

②在src\layout\components\AppMain.vue中添加，key只会影响AppMain.vue内部包含的组件，而不会影响外部的导航栏等组件。

bash 复制代码

<template>
  <section class="app-main">
    <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>
    <iframe-toggle />
    <copyright />
  </section>
</template>