vue3中使用keepAlive緩存路由組件不生效的問題解決
問題出現(xiàn)原因
在router.js中注冊(cè)路由：
{
path: '/template-allocation',
name: 'TemplateAllocation',
meta: { title: '風(fēng)險(xiǎn)任務(wù)詳情', keepAlive: true },
component: () =>
import(
'../views/template-allocation/index.vue'
),
},在router-view中使用keepAlive緩存組件：
<router-view v-slot="{ Component }" v-if="isShow">
<div class="child-view">
<KeepAlive :include="['TemplateAllocation']">
<component :is="Component"></component>
</KeepAlive>
</div>
</router-view>最后發(fā)現(xiàn)并不生效，在大佬的幫助下，才找到原因：include中使用的name并不是注冊(cè)的路由的name?。?！
而是組件本身的name，記得在vue2中的時(shí)候，export default中有個(gè)屬性可以聲明name，但是在vue3中的setup語(yǔ)法糖中，很少關(guān)注如何聲明name。
官網(wǎng)有這么一句話：
可是我自己在整理目錄結(jié)構(gòu)的時(shí)候，習(xí)慣將目錄這樣設(shè)置：/template-allocation/index.vue，這樣就會(huì)導(dǎo)致自動(dòng)生成的name變成了Index!
就會(huì)導(dǎo)致keepAlice的include屬性不生效了。
如何查找我們的組件名稱呢?
這就要借助一個(gè)常用工具Vue Devtools，如下：
從上圖可以看到Index就是我們的組件名字了。
setup中如何設(shè)置組件的名字呢？
官網(wǎng)提供了一個(gè)defineOptions，可以這么設(shè)置：
defineOptions({
name: 'TemplateAllocation'
})從Vue Devtools可以看到組件名字變成了TemplateAllocation，如下：
以上就是本次的分享內(nèi)容了，又踩了一個(gè)小坑。奉上當(dāng)初提問的地址。
到此這篇關(guān)于vue3中使用keepAlive緩存路由組件不生效的情況記錄的文章就介紹到這了,更多相關(guān)vue keepAlive不生效內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
VScode中配置ESlint+Prettier詳細(xì)步驟(附圖文介紹)
這篇文章主要介紹了VScode中配置ESlint+Prettier詳細(xì)步驟,文中通過代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-12-12
解決v-for中使用v-if或者v-bind:class失效的問題
今天小編就為大家分享一篇解決v-for中使用v-if或者v-bind:class失效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-09-09
Vue生產(chǎn)和開發(fā)環(huán)境如何切換及過濾器的使用
本文主要介紹了Vue生產(chǎn)、開發(fā)環(huán)境如何切換及過濾器的使用，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue-Router路由守衛(wèi)詳?shù)募?xì)用法教程
在Vue.js應(yīng)用中,Vue-Router是一個(gè)非常重要的插件,它允許我們實(shí)現(xiàn)頁(yè)面間的導(dǎo)航,然而,僅僅實(shí)現(xiàn)導(dǎo)航是不夠的,我們還需要在導(dǎo)航的不同階段進(jìn)行各種操作,本文將結(jié)合實(shí)際案例,詳細(xì)介紹Vue-Router路由守衛(wèi)的用法,需要的朋友可以參考下2024-12-12
Vue3 數(shù)據(jù)總線的實(shí)現(xiàn)
在Vue3中,可以使用mitt實(shí)現(xiàn)事件總線,mitt是一個(gè)輕量級(jí)的事件發(fā)布/訂閱庫(kù),核心功能包括發(fā)布事件、訂閱事件和取消訂閱,下面就來(lái)介紹一下如何使用,感興趣的可以了解一下2026-04-04
前端項(xiàng)目常用的三個(gè)Skills總結(jié)(Vue、React與UI核心Skills)
最近一種新概念在前端社區(qū)中受到關(guān)注,Skills這個(gè)概念很快被React和Vue社區(qū)接受,并引發(fā)了關(guān)于AI編程方式的新思考,這篇文章主要介紹了前端項(xiàng)目常用的三個(gè)Skills的相關(guān)資料,分別是Vue、React與UI核心Skills,需要的朋友可以參考下2026-05-05
這篇文章主要為大家介紹了Vue編程三部曲之將template編譯成AST示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue實(shí)現(xiàn)滑動(dòng)超出指定距離回頂部功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)滑動(dòng)超出指定距離回頂部功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要為大家詳細(xì)介紹了vue3中form表單層級(jí)嵌套問題的相關(guān)解決方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-05-05