vue3切換路由時(shí)頁面空白問題解決辦法
更新時(shí)間：2024年09月29日 09:34:26 作者：萬物皆對象666
在使用Vue3時(shí),有時(shí)頁面修改后會出現(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)識，不是在src根目錄下main.vue中修改（在這個(gè)文件修改會造成每次切換路由導(dǎo)航標(biāo)簽都會收起）
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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+elementui 表格分頁限制最大頁碼數(shù)的操作代碼
這篇文章主要介紹了vue+elementui 表格分頁限制最大頁碼數(shù)的操作代碼,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-08-08
這篇文章主要介紹了vue3中vue-meta的使用方法，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vuex 第三方包實(shí)現(xiàn)數(shù)據(jù)持久化的方法
本文主要介紹了vuex 第三方包實(shí)現(xiàn)數(shù)據(jù)持久化的方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
ESLint是一個(gè)QA工具，這篇文章主要介紹了詳解ESLint在Vue中的使用小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
vue 動態(tài)組件(component :is) 和 dom元素限制(is)用法說明
這篇文章主要介紹了vue 動態(tài)組件(component :is) 和 dom元素限制(is)用法說明，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
vue 解決form表單提交但不跳轉(zhuǎn)頁面的問題
今天小編就為大家分享一篇vue 解決form表單提交但不跳轉(zhuǎn)頁面的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
最近找到幾個(gè)好用的插件,這里分享一下,下面這篇文章主要給大家介紹了關(guān)于vue3中超好用的插件整理,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
Vue使用ElemenUI對table的指定列進(jìn)行合算的方法
這篇文章主要介紹了Vue使用ElemenUI對table的指定列進(jìn)行合算的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-03-03
這篇文章主要給大家介紹了關(guān)于Vite內(nèi)網(wǎng)ip訪問的2種配置方式,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用Vite具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue使用refs獲取嵌套組件中的值過程，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03