切换路由时页面空白问题(vue3)

万物皆对象666 2024-09-10 14:03:01 阅读 81

1.vue3页面空白不报错,刷新后显示正常

记录问题:vue3中修改当前页面代码保存后,回到页面显示空白,切换菜单页面同样显示空白,刷新页面后恢复显示正常。解决方法:为router-view添加key  :key="$route.fullPath"添加位置:/layout/components/AppMain.vue文件具体代码:

<code><template>

<section class="app-main">code>

<router-view v-slot="{ Component, route }" :key="$route.fullPath">code>

<transition :enter-active-class="animante" mode="out-in">code>

<keep-alive :include="tagsViewStore.cachedViews">code>

<component v-if="!route.meta.link" :is="Component" :key="route.path" />code>

</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>

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



声明

本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。