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語法糖中，很少關(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)文章
淺談vue中resetFields()使用注意事項(xiàng)
這篇文章主要介紹了淺談vue中resetFields()使用注意事項(xiàng)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了詳解vue 兼容IE報(bào)錯(cuò)解決方案，詳細(xì)的介紹了幾種原因及其解決方案，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-12-12
Vue.js 是一個(gè)流行的前端JavaScript框架,用于構(gòu)建用戶界面,在這個(gè)"vue網(wǎng)頁(yè)登錄界面"的示例中,我們探討的是如何使用Vue.js創(chuàng)建一個(gè)簡(jiǎn)單的登錄頁(yè)面,感興趣的小伙伴跟著小編一起來看看吧2025-04-04
Vite3結(jié)合Svelte3使用@import導(dǎo)入scss樣式
這篇文章主要為大家介紹了Vite3結(jié)合Svelte3使用@import導(dǎo)入scss樣式實(shí)現(xiàn)實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Vite結(jié)合whistle實(shí)現(xiàn)一勞永逸開發(fā)環(huán)境代理方案
這篇文章主要為大家介紹了Vite結(jié)合whistle實(shí)現(xiàn)一勞永逸開發(fā)環(huán)境代理方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue 項(xiàng)目往往會(huì)搭配 vue-router 官方路由管理器，它和 vue.js 的核心深度集成，讓構(gòu)建單頁(yè)面應(yīng)用變得易如反掌。這篇文章主要介紹了vue 項(xiàng)目地址去掉 #的方法,需要的朋友可以參考下2018-10-10
這篇文章主要給大家介紹了Vue3自定義指令的相關(guān)資料,自定義指令是一種在Vue應(yīng)用程序中擴(kuò)展HTML標(biāo)簽的能力,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue?瀏覽器本地存儲(chǔ),LocalStorage 和 SessionStorage 統(tǒng)稱為 WebStorage，存儲(chǔ)大小一般支持5mb左右，但是不同的瀏覽器也有區(qū)別，具體內(nèi)容介紹跟隨小編一起看看吧2022-04-04
Vue3+axios+Mock.js實(shí)現(xiàn)登錄功能的示例代碼
本文主要介紹了Vue3+axios+Mock.js實(shí)現(xiàn)登錄功能的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
詳解在vue-cli項(xiàng)目中使用mockjs(請(qǐng)求數(shù)據(jù)刪除數(shù)據(jù))
本篇文章主要介紹了在vue-cli項(xiàng)目中使用mockjs(請(qǐng)求數(shù)據(jù)刪除數(shù)據(jù))，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10