vue3在運(yùn)行時(shí)路由可以正常跳轉(zhuǎn)，但是頁(yè)面空白，刷新頁(yè)面恢復(fù)正常，在網(wǎng)上尋找很久說(shuō)是keepAlive的原因，后來(lái)看了看我的代碼~
原來(lái)的代碼：
<template>
<div class="out-content">
? ? ...
</div>
<div ref="confirmModal">
? ? ...
</div>
</template>改后的代碼：
<template>
<div class="out-content">
? ? <div ref="confirmModal">
? ? ...
? </div>
</div>
</template>由此可見(jiàn)，根元素一定要由一個(gè)div去包裹??！template必須有且只能有一個(gè)div在這樣才會(huì)正常顯示~
原理：
這里我們要先看一看template這個(gè)標(biāo)簽，這個(gè)標(biāo)簽是HTML5出來(lái)的新標(biāo)簽，它有三個(gè)特性：
隱藏性：該標(biāo)簽不會(huì)顯示在頁(yè)面的任何地方，即便里面有多少內(nèi)容，它永遠(yuǎn)都是隱藏的狀態(tài)；
任意性：該標(biāo)簽可以寫(xiě)在頁(yè)面的任何地方，甚至是head、body、sciprt標(biāo)簽內(nèi)；
無(wú)效性：該標(biāo)簽里的任何HTML內(nèi)容都是無(wú)效的，不會(huì)起任何作用；
但是我們可以通過(guò)innerHTML來(lái)獲取到里面的內(nèi)容。
知道了這個(gè)，我們?cè)賮?lái)看.vue的單文件組件。其實(shí)本質(zhì)上，一個(gè)單文件組件會(huì)被各種各樣的loader處理成為.js文件（因?yàn)楫?dāng)你import一個(gè)單文件組件并打印出來(lái)的時(shí)候，是一個(gè)vue實(shí)例），通過(guò)template的任意性我們知道，template包裹的HTML可以寫(xiě)在任何地方，那么對(duì)于一個(gè).vue來(lái)講，這個(gè)template里面的內(nèi)容就是會(huì)被vue處理為虛擬dom并渲染的內(nèi)容，導(dǎo)致結(jié)果又回到了開(kāi)始 ：既然一個(gè).vue單文件組件是一個(gè)vue實(shí)例，那么這個(gè)實(shí)例的入口在哪里？
如果在template下有多個(gè)div，那么該如何指定這個(gè)vue實(shí)例的根入口？
為了讓組件能夠正常的生成一個(gè)vue實(shí)例，那么這個(gè)div會(huì)被自然的處理成程序的入口。
通過(guò)這個(gè)**‘根節(jié)點(diǎn)’，**來(lái)遞歸遍歷整個(gè)vue‘樹(shù)’下的所有節(jié)點(diǎn)，并處理為vdom，最后再渲染成真正的HTML，插入在正確的位置。
如果你覺(jué)得以上的內(nèi)容不太好理解，那么就看看下面的一段話，我覺(jué)得形容的很到位：
Vue 實(shí)例其實(shí)并不知道哪一個(gè)是入口，它應(yīng)該接管哪一個(gè)部分，所以你要給它指定一個(gè)唯一的元素作為入口。
每一個(gè)入口可以看作是一個(gè) Vue 的類(lèi)，Vue 要把這個(gè)入口進(jìn)去的所有東西都取出來(lái)進(jìn)行輪循渲染一遍，再把它重新掛載回頁(yè)面中的 DOM 里面去。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-426946.html
打給比方來(lái)說(shuō)，一個(gè) Vue 實(shí)例只擁有一個(gè)鑰匙，一個(gè)鑰匙只能開(kāi)一把鎖，但是頁(yè)面上有很多把鎖，如果你不說(shuō)清楚它是哪把鎖的鑰匙，Vue 實(shí)例就不知道接下來(lái)要怎么做了，所以頁(yè)面順其自然的就不會(huì)進(jìn)行渲染了~文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-426946.html
到了這里，關(guān)于vue3在運(yùn)行時(shí)路由可以正常跳轉(zhuǎn)，但是頁(yè)面空白，刷新頁(yè)面恢復(fù)正常[已解決]的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
