vue3 keep-alive include失效的原因排查 setup语法糖文件名称name暴露的问题

目录

  • 案例
  • 解决方法

案例

举例路由配置如下:

export const Layout = () => import("@/layout/index.vue")
const componentsRouter = {
  path: '/code',
  component: Layout,
  redirect: 'noRedirect',
  name: 'Code',
  meta: {
    title: '',
    permi: [''],
    icon: ''
  },
  children: [
    {
      path: 'flow',
      component: () => import(''),
      name: 'Flow',
      meta: {
        title: '',
        permi: [''],
        keepAlive: true,
        icon: ''
      }
    }
  ]
}
export default componentsRouter

appMain中配置keepalive的代码:

<script setup lang="ts">
</script>

<template>
  <section class="app-main">
    <router-view v-slot="{ Component, route }">
      <transition name="router-fade" mode="out-in">
        <keep-alive :include="['Flow']">
          <component :is="Component" :key="route.fullPath" />
        </keep-alive>
      </transition>
    </router-view>
  </section>
</template>

当单页面组件name为Flow时,正常应该启用keepalive功能。但实际keepAlive功能失效

解决方法

参考官方文档中keepalive部分的信息,KeepAlive 默认会缓存内部的所有组件实例会根据组件的 name 选项进行匹配,所以组件如果想要条件性地被 KeepAlive 缓存,就必须显式声明一个 name 选项。

当前vue3项目为选项式API时,可以通过以下方式在页面组件中需要添加 name。

<script lang="ts">
export default {
  name: 'User'
}
</script>

但是如此一来就不能使用setup语法糖了,既然都用了vue3,得用起来啊!

TIP
在 3.2.34 或以上的版本中,使用

你可能感兴趣的:(吃一堑长一智,解决vue小问题,vue.js,前端,前端框架,vue3)