腳本之家服務器常用軟件

快捷導航

vue3切換路由時頁面空白問題解決辦法

更新時間：2024年09月29日 09:34:26 作者：萬物皆對象666

在使用Vue3時,有時頁面修改后會出現(xiàn)空白,這篇文章主要介紹了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盒子包裹內(nèi)容。②看看是否在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>

總結(jié)

到此這篇關(guān)于vue3切換路由時頁面空白問題解決辦法的文章就介紹到這了,更多相關(guān)vue3切換路由頁面空白內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3切換路由時頁面空白問題解決辦法

目錄

1.vue3頁面空白不報錯，刷新后顯示正常

2.vue3切換路由后頁面不報錯顯示空白，刷新后顯示正常

總結(jié)

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具