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中禁止编辑的常见方法(以禁止编辑输入框为例)
在我们开发项目的时候,有时候我们不希望用户对我们的页面进行操作,尤其是输入框之类的,这篇文章主要给大家介绍了Vue中禁止编辑的常见方法,文中介绍的方法主要以禁止编辑输入框为例,需要的朋友可以参考下
2024-02-02
vue3在router中使用store报错的完美解决方案
这篇文章主要介绍了vue3在router中使用store报错解决方案,就是需要在实例化一下,因为在编译router的时候pinia还未被实例化,文中补充介绍了vue3中router和store详细使用教程方法,感兴趣的朋友一起看看吧
2023-11-11
Vue项目中token验证登录(前端部分)
这篇文章主要为大家详细介绍了Vue项目中token验证登录，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
Vue精美简洁登录页完整代码实例
这篇文章主要给大家介绍了关于Vue精美简洁登录页完整代码的相关资料,通过文中的方法大家可以使用实现简单的用户登录界面,下面通过示例代码介绍的非常详细,需要的朋友可以参考下
2023-07-07
3种vue组件的书写形式
这篇文章主要为大家详细介绍了3种vue组件的书写形式，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
vue项目中扫码支付的实现示例(附demo)
本文主要介绍了vue项目中扫码支付的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
Vue中使用Tailwind CSS的具体方法
本文主要介绍了Vue中使用Tailwind CSS的具体方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04
VUE 使用中踩过的坑
本篇是我对vue使用过程中以及对一些社区朋友提问我的问题中做的一些总结，感兴趣的朋友跟随脚本之家小编一起学习吧
2018-02-02
Vue3-新特性defineOptions和defineModel示例详解
在Vue3.3中新引入了defineOptions宏主要是用来定义Option API的选项,可以用defineOptions定义任意的选项,props、emits、expose、slots除外,本文给大家介绍Vue3-新特性defineOptions和defineModel,感兴趣的朋友一起看看吧
2023-11-11
Vue中Mustache引擎插值语法使用详解
在Vue中通过Mustache模板引擎将data中的文本数据插入到HTML中,下面这篇文章主要给大家介绍了关于Vue中Mustache模板引擎插值语法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-12-12