vue3切换路由时页面空白问题解决办法

更新时间：2024年09月29日 09:34:26 作者：万物皆对象666

在使用Vue3时,有时页面修改后会出现空白,这篇文章主要介绍了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>

总结

到此这篇关于vue3切换路由时页面空白问题解决办法的文章就介绍到这了,更多相关vue3切换路由页面空白内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

一文搞懂VueJs中customRef函数使用
这篇文章主要为大家介绍了VueJs中customRef函数使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
Vue使用Echarts的三种实现方式
文章介绍了三种在Vue项目中使用ECharts的方法：直接使用原始方法、使用vue-echarts和v-chhart,详细描述了每种方法的步骤和优势,帮助开发者在Vue项目中更方便地地使用ECharts
2026-04-04
vue中lottie的使用和配置详解
vue-lottie是一个用于在Vue项目中集成Lottie动画库的组件,它通过 JSON 文件渲染 AfterEffects 动画,适用于复杂矢量动画的高效展示,本文介绍vue中lottie的使用和配置方法,感兴趣的朋友跟随小编一起看看吧
2026-01-01
Vue实现数据导出导入实战案例
我们经常需要在Vue搭建的后台管理系统里进行数据导入导出等操作,下面这篇文章主要给大家介绍了关于Vue实现数据导出导入实战案例的相关资料,需要的朋友可以参考下
2023-01-01
Vue.js element-plus使用图标不显示问题的解决方式
近期在学习Vue时用elementUI时发现图标在页面上显示不出来,所以这篇文章主要给大家介绍了关于Vue.js element-plus使用图标不显示问题的解决方式,需要的朋友可以参考下
2022-09-09
八种Vue组件间通讯方式合集(推荐)
这篇文章主要介绍了八种Vue组件间通讯方式合集(推荐)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-08-08
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
这篇文章主要介绍了vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue-cli中实现响应式布局的方法
这篇文章主要介绍了vue-cli中实现响应式布局的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
Vue3中进行二维码的生成与解码实现详解
这篇文章主要为大家介绍了Vue3中进行二维码的生成与解码实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-03-03
vue路由插件之vue-route
这篇文章主要介绍了vue路由插件之vue-route的相关知识，本文通过实例代码给大家介绍了vue router的使用，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06