vue3中使用keepAlive緩存路由組件不生效的問題解決
更新時間：2024年06月27日 10:59:42 作者：weixin_40451732
這篇文章主要介紹了vue3中使用keepAlive緩存路由組件不生效的問題解決,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
問題出現原因
在router.js中注冊路由：
{
path: '/template-allocation',
name: 'TemplateAllocation',
meta: { title: '風險任務詳情', 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ā)現并不生效，在大佬的幫助下，才找到原因：include中使用的name并不是注冊的路由的name?。。?br />而是組件本身的name，記得在vue2中的時候，export default中有個屬性可以聲明name，但是在vue3中的setup語法糖中，很少關注如何聲明name。
官網有這么一句話：
可是我自己在整理目錄結構的時候，習慣將目錄這樣設置：/template-allocation/index.vue，這樣就會導致自動生成的name變成了Index!
就會導致keepAlice的include屬性不生效了。
如何查找我們的組件名稱呢?
這就要借助一個常用工具Vue Devtools，如下：
從上圖可以看到Index就是我們的組件名字了。
setup中如何設置組件的名字呢？
官網提供了一個defineOptions，可以這么設置：
defineOptions({
name: 'TemplateAllocation'
})從Vue Devtools可以看到組件名字變成了TemplateAllocation，如下：
以上就是本次的分享內容了，又踩了一個小坑。奉上當初提問的地址。
到此這篇關于vue3中使用keepAlive緩存路由組件不生效的情況記錄的文章就介紹到這了,更多相關vue keepAlive不生效內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了淺談vue中resetFields()使用注意事項，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要介紹了詳解vue 兼容IE報錯解決方案，詳細的介紹了幾種原因及其解決方案，非常具有實用價值，需要的朋友可以參考下2018-12-12
Vue.js 是一個流行的前端JavaScript框架,用于構建用戶界面,在這個"vue網頁登錄界面"的示例中,我們探討的是如何使用Vue.js創(chuàng)建一個簡單的登錄頁面,感興趣的小伙伴跟著小編一起來看看吧2025-04-04
Vite3結合Svelte3使用@import導入scss樣式
這篇文章主要為大家介紹了Vite3結合Svelte3使用@import導入scss樣式實現實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
Vite結合whistle實現一勞永逸開發(fā)環(huán)境代理方案
這篇文章主要為大家介紹了Vite結合whistle實現一勞永逸開發(fā)環(huán)境代理方案，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
vue 項目往往會搭配 vue-router 官方路由管理器，它和 vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。這篇文章主要介紹了vue 項目地址去掉 #的方法,需要的朋友可以參考下2018-10-10
這篇文章主要給大家介紹了Vue3自定義指令的相關資料,自定義指令是一種在Vue應用程序中擴展HTML標簽的能力,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue?瀏覽器本地存儲,LocalStorage 和 SessionStorage 統(tǒng)稱為 WebStorage，存儲大小一般支持5mb左右，但是不同的瀏覽器也有區(qū)別，具體內容介紹跟隨小編一起看看吧2022-04-04
本文主要介紹了Vue3+axios+Mock.js實現登錄功能的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-05-05
詳解在vue-cli項目中使用mockjs(請求數據刪除數據)
本篇文章主要介紹了在vue-cli項目中使用mockjs(請求數據刪除數據)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10