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切换路由页面空白内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue+elementui 表格分页限制最大页码数的操作代码
这篇文章主要介绍了vue+elementui 表格分页限制最大页码数的操作代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2024-08-08
vue3中vue-meta的使用方法解析
这篇文章主要介绍了vue3中vue-meta的使用方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
vuex 第三方包实现数据持久化的方法
本文主要介绍了vuex 第三方包实现数据持久化的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
详解ESLint在Vue中的使用小结
ESLint是一个QA工具，这篇文章主要介绍了详解ESLint在Vue中的使用小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
这篇文章主要介绍了vue 动态组件(component :is) 和 dom元素限制(is)用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue 解决form表单提交但不跳转页面的问题
今天小编就为大家分享一篇vue 解决form表单提交但不跳转页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
vue3中超好用的插件整理
最近找到几个好用的插件,这里分享一下,下面这篇文章主要给大家介绍了关于vue3中超好用的插件整理,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
Vue使用ElemenUI对table的指定列进行合算的方法
这篇文章主要介绍了Vue使用ElemenUI对table的指定列进行合算的方法,本文结合实例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-03-03
Vite内网ip访问2种配置方式
这篇文章主要给大家介绍了关于Vite内网ip访问的2种配置方式,文中通过实例代码介绍的非常详细,对大家学习或者使用Vite具有一定的参考学习价值,需要的朋友可以参考下
2023-07-07
vue使用refs获取嵌套组件中的值过程
这篇文章主要介绍了vue使用refs获取嵌套组件中的值过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03