問題出現(xiàn)原因

在router.js中注冊路由：

{
    path: '/template-allocation',
    name: 'TemplateAllocation',
    meta: { title: '風險任務(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并不是注冊的路由的name?。。?br />而是組件本身的name，記得在vue2中的時候，export default中有個屬性可以聲明name，但是在vue3中的setup語法糖中，很少關(guān)注如何聲明name。
官網(wǎng)有這么一句話：

可是我自己在整理目錄結(jié)構(gòu)的時候，習慣將目錄這樣設(shè)置：/template-allocation/index.vue，這樣就會導(dǎo)致自動生成的name變成了Index!
就會導(dǎo)致keepAlice的include屬性不生效了。

如何查找我們的組件名稱呢?

這就要借助一個常用工具Vue Devtools，如下：

從上圖可以看到Index就是我們的組件名字了。

setup中如何設(shè)置組件的名字呢？

官網(wǎng)提供了一個defineOptions，可以這么設(shè)置：

defineOptions({
  name: 'TemplateAllocation'
})

從Vue Devtools可以看到組件名字變成了TemplateAllocation，如下：

以上就是本次的分享內(nèi)容了，又踩了一個小坑。奉上當初提問的地址。

到此這篇關(guān)于vue3中使用keepAlive緩存路由組件不生效的情況記錄的文章就介紹到這了,更多相關(guān)vue keepAlive不生效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！