vue3切換路由時(shí)頁(yè)面空白問(wèn)題解決辦法
更新時(shí)間：2024年09月29日 09:34:26 作者：萬(wàn)物皆對(duì)象666
在使用Vue3時(shí),有時(shí)頁(yè)面修改后會(huì)出現(xiàn)空白,這篇文章主要介紹了vue3切換路由時(shí)頁(yè)面空白問(wèn)題解決辦法,文中介紹的步驟可以有效解決頁(yè)面空白問(wèn)題,需要的朋友可以參考下
1.vue3頁(yè)面空白不報(bào)錯(cuò)，刷新后顯示正常
- 記錄問(wèn)題：vue3中修改當(dāng)前頁(yè)面代碼保存后，回到頁(yè)面顯示空白，切換菜單頁(yè)面同樣顯示空白，刷新頁(yè)面后恢復(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下的主頁(yè)面中的 router-view 添加標(biāo)識(shí)，不是在src根目錄下main.vue中修改（在這個(gè)文件修改會(huì)造成每次切換路由導(dǎo)航標(biāo)簽都會(huì)收起）
2.vue3切換路由后頁(yè)面不報(bào)錯(cuò)顯示空白，刷新后顯示正常
- 記錄問(wèn)題：vue3中只切換路由后頁(yè)面不報(bào)錯(cuò)顯示空白，在該頁(yè)面刷新后正常顯示，切換路由又不顯示問(wèn)題。
- 解決方法：可以依次檢查以下問(wèn)題：①是否在根組件標(biāo)簽最外層包含了個(gè)最大的div盒子包裹內(nèi)容。②看看是否在template標(biāo)簽下面直接有注釋?zhuān)绻行枰炎⑨寣?xiě)到div里面。（即根標(biāo)簽下不要直接有注釋?zhuān)?/li>
- 錯(cuò)誤案例：
- <template>中間有多個(gè)div標(biāo)簽
- <template>與<div>之間有注釋
錯(cuò)誤寫(xiě)法（案例1）：
<template>
<div>布局1</div>
<div>布局2</div>
</template>正確寫(xiě)法（案例1）：
<template>
<div>
<div>布局1</div>
<div>布局2</div>
</div>
</template>錯(cuò)誤寫(xiě)法（案例2）：
<template> <!-- 注釋 --> <div> 開(kāi)始布局 </div> <!-- 注釋 --> </template>
正確寫(xiě)法（案例2）：
<template> <div> <!-- 注釋 /> --> 開(kāi)始布局 <!-- 注釋 /> --> </div> </template>
總結(jié)
到此這篇關(guān)于vue3切換路由時(shí)頁(yè)面空白問(wèn)題解決辦法的文章就介紹到這了,更多相關(guān)vue3切換路由頁(yè)面空白內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+elementui 表格分頁(yè)限制最大頁(yè)碼數(shù)的操作代碼
這篇文章主要介紹了vue+elementui 表格分頁(yè)限制最大頁(yè)碼數(shù)的操作代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-08-08
這篇文章主要介紹了vue3中vue-meta的使用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vuex 第三方包實(shí)現(xiàn)數(shù)據(jù)持久化的方法
本文主要介紹了vuex 第三方包實(shí)現(xiàn)數(shù)據(jù)持久化的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
ESLint是一個(gè)QA工具，這篇文章主要介紹了詳解ESLint在Vue中的使用小結(jié)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
vue 動(dòng)態(tài)組件(component :is) 和 dom元素限制(is)用法說(shuō)明
這篇文章主要介紹了vue 動(dòng)態(tài)組件(component :is) 和 dom元素限制(is)用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue 解決form表單提交但不跳轉(zhuǎn)頁(yè)面的問(wèn)題
今天小編就為大家分享一篇vue 解決form表單提交但不跳轉(zhuǎn)頁(yè)面的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
最近找到幾個(gè)好用的插件,這里分享一下,下面這篇文章主要給大家介紹了關(guān)于vue3中超好用的插件整理,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
Vue使用ElemenUI對(duì)table的指定列進(jìn)行合算的方法
這篇文章主要介紹了Vue使用ElemenUI對(duì)table的指定列進(jìn)行合算的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-03-03
Vite內(nèi)網(wǎng)ip訪問(wèn)2種配置方式
這篇文章主要給大家介紹了關(guān)于Vite內(nèi)網(wǎng)ip訪問(wèn)的2種配置方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vite具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue使用refs獲取嵌套組件中的值過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03