vue 记录

vue-router 使用 keep-alive 缓存页面

在 vue3 中需要这么写：

<template>
  <RouterView v-slot="{ Component }">
    <Transition>
      <KeepAlive :include="[PAGE_NAMES.STRATEGY, PAGE_NAMES.HERO, PAGE_NAMES.FETTER, PAGE_NAMES.MORE]">
        <component :is="Component" :key="$route.fullPath" />
      </KeepAlive>
    </Transition>
  </RouterView>
</template>

注意

<component :is="Component" :key="$route.fullPath" /> 需要作为 KeepAlive 组件的直接子组件，否则缓存不生效。

vue3 中组件用 ts 定义 props，并且定义类型和默认值

type LineupObjType = {
  lineupName: string
  coreHeros: any[],
  alternativeHeros: any[][]
}

const props = withDefaults(defineProps<{
  lineupObj: LineupObjType
}>(), {
  lineupObj: () => ({
    lineupName: '',
    coreHeros: [],
    alternativeHeros: [[]]
  })
})