<router-view v-if="$route.meta.keepAlive" v-slot="{ Component }">
   <transition name="fade" mode="out-in">
         <component :is="Component" :key="$route.path" />
   </transition>
</router-view>
<router-view v-if="!$route.meta.keepAlive" v-slot="{ Component }">
   <transition name="fade" mode="out-in">
      <keep-alive>
           <component :is="Component" :key="$route.path" />
      </keep-alive>
   </transition>
</router-view>
//上面代码通过keepAlive属性来使用keep-alive从而，是否保持组件的缓存,
如果使用不当，这里会引起标题中的错误提示,
比如

export const SettingRouters = {
  path: '/a',
  component: layout,
  redirect: '/a/b',
  meta: {
    title: 'setting',
    icon: 'ic ic-homepage-fill'
  },
  children: [
    {
      path: '/a/b',
      name: 'ab',
      component: () => import('@/views/c/a/b/index.vue'),
      meta: {
        title: 'a',
        icon: 'ic'
      }
    },
    {
      path: '/a/b/edit',
      name: 'abe',
      component: () => import('@/views/c/a/b/edit.vue'),
      meta: {
        title: 'new',
        icon: 'ic',
        hidden: true
        keepAlive: true  //这里通过该属性来表示是否保存缓存,
      }
    }
  ]
}

正确使用keep-alive的方式应该是

<router-view v-if="!$route.meta.keepAlive" v-slot="{ Component }">
   <transition name="fade" mode="out-in">
       <keep-alive :exclude="excludeList">
           <component :is="Component" :key="$route.path" />
       </keep-alive>
  </transition>
</router-view>
//这里使用exclude的属性来排除不保存缓存的组件 include不填，默认都保存组件缓存,请参考vue官方对exclude的解释
vu3 组件名称 
<script lang="ts">
export default {
  name: 'a-e'
}
</script>
<script lang="ts" setup>
</script>
如果觉得不优雅，请参考  https://zhuanlan.zhihu.com/p/481640259
组件名称配置好后， 配置excludeList
let excludeList:any = ['a-e']