快捷導(dǎo)航

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

更新時(shí)間：2024年09月29日 09:34:26 作者：萬物皆對(duì)象666

在使用Vue3時(shí),有時(shí)頁面修改后會(huì)出現(xiàn)空白,這篇文章主要介紹了vue3切換路由時(shí)頁面空白問題解決辦法,文中介紹的步驟可以有效解決頁面空白問題,需要的朋友可以參考下

1.vue3頁面空白不報(bào)錯(cuò)，刷新后顯示正常

記錄問題：vue3中修改當(dāng)前頁面代碼保存后，回到頁面顯示空白，切換菜單頁面同樣顯示空白，刷新頁面后恢復(fù)顯示正常。
解決方法：為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 添加標(biāo)識(shí)，不是在src根目錄下main.vue中修改（在這個(gè)文件修改會(huì)造成每次切換路由導(dǎo)航標(biāo)簽都會(huì)收起）

2.vue3切換路由后頁面不報(bào)錯(cuò)顯示空白，刷新后顯示正常

記錄問題：vue3中只切換路由后頁面不報(bào)錯(cuò)顯示空白，在該頁面刷新后正常顯示，切換路由又不顯示問題。
解決方法：可以依次檢查以下問題：①是否在根組件標(biāo)簽最外層包含了個(gè)最大的div盒子包裹內(nèi)容。②看看是否在template標(biāo)簽下面直接有注釋，如果有需要把注釋寫到div里面。（即根標(biāo)簽下不要直接有注釋）
錯(cuò)誤案例：

<template>中間有多個(gè)div標(biāo)簽
<template>與<div>之間有注釋

錯(cuò)誤寫法（案例1）：

<template>
    <div>布局1</div>
    <div>布局2</div>
</template>

正確寫法（案例1）：

<template>
    <div>
        <div>布局1</div>
        <div>布局2</div>
     </div>
</template>

錯(cuò)誤寫法（案例2）：

<template>
 <!-- 注釋 -->
<div>
開始布局
</div>
 <!-- 注釋 -->
</template>

正確寫法（案例2）：

<template>
<div>
 <!-- 注釋 /> -->
開始布局
 <!-- 注釋 /> -->
</div>
</template>

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

一文搞懂VueJs中customRef函數(shù)使用
這篇文章主要為大家介紹了VueJs中customRef函數(shù)使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
Vue使用Echarts的三種實(shí)現(xiàn)方式
文章介紹了三種在Vue項(xiàng)目中使用ECharts的方法：直接使用原始方法、使用vue-echarts和v-chhart,詳細(xì)描述了每種方法的步驟和優(yōu)勢(shì),幫助開發(fā)者在Vue項(xiàng)目中更方便地地使用ECharts
2026-04-04
vue中l(wèi)ottie的使用和配置詳解
vue-lottie是一個(gè)用于在Vue項(xiàng)目中集成Lottie動(dòng)畫庫的組件,它通過 JSON 文件渲染 AfterEffects 動(dòng)畫,適用于復(fù)雜矢量動(dòng)畫的高效展示,本文介紹vue中l(wèi)ottie的使用和配置方法,感興趣的朋友跟隨小編一起看看吧
2026-01-01
Vue實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出導(dǎo)入實(shí)戰(zhàn)案例
我們經(jīng)常需要在Vue搭建的后臺(tái)管理系統(tǒng)里進(jìn)行數(shù)據(jù)導(dǎo)入導(dǎo)出等操作,下面這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)數(shù)據(jù)導(dǎo)出導(dǎo)入實(shí)戰(zhàn)案例的相關(guān)資料,需要的朋友可以參考下
2023-01-01
Vue.js?element-plus使用圖標(biāo)不顯示問題的解決方式
近期在學(xué)習(xí)Vue時(shí)用elementUI時(shí)發(fā)現(xiàn)圖標(biāo)在頁面上顯示不出來,所以這篇文章主要給大家介紹了關(guān)于Vue.js?element-plus使用圖標(biāo)不顯示問題的解決方式,需要的朋友可以參考下
2022-09-09
八種Vue組件間通訊方式合集(推薦)
這篇文章主要介紹了八種Vue組件間通訊方式合集(推薦)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
vue封裝自定義指令之動(dòng)態(tài)顯示title操作(溢出顯示,不溢出不顯示)
這篇文章主要介紹了vue封裝自定義指令之動(dòng)態(tài)顯示title操作(溢出顯示,不溢出不顯示)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
vue-cli中實(shí)現(xiàn)響應(yīng)式布局的方法
這篇文章主要介紹了vue-cli中實(shí)現(xiàn)響應(yīng)式布局的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
vue路由插件之vue-route
這篇文章主要介紹了vue路由插件之vue-route的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹了vue router的使用，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-06-06