解决vue-router在3级路由keep-alive后组件加载多次方法

1.问题
连续两天遇到keepalive问题，第一个问题是三级路由嵌套router-view没法缓存问题，第二个问题是使用keepalive导致组件渲染两次问题，深坑。。。
官方bug https://github.com/vuejs/router/issues/626

解决办法
思路：
1.多层视图router-view 的时候

<router-view v-slot="{ Component,}">
    <keep-alive :include="firstKeepAliveRoute">
      <component :is="Component"/>
    </keep-alive>
  </router-view>

得保证每个组件name 声名，而且父级router-view 也得声名父级路由组件name,子级路由组件name也得声明，这样缓存才能起作用。
但是问题来了，缓存成功了，但我们切换菜单的时候，子级的routerView 会执行2次，有时候onMounted, onActivated 会执行多次，且顺序有时候先前先后，这不是我们想要的东西。我们一般会期望执行一次，而不是多次，因为我们要在这里们搞事情，怎么能允许多次执行。

本人查看了官方vue issue 发现有好多人提这个问题。

<router-view v-slot="{ Component, route}">
    <keep-alive :include="firstKeepAliveRoute">
      <component :is="Component" :key="$route.fullPath"/>
    </keep-alive>
  </router-view>

一开始我加了key 发现页面很卡，因为加了key 组件不能复用，查看vue-router文档 人家keep-alive 也没添加key。

后来我把key去掉了

<script lang="ts" setup>
import { onMounted } from 'vue';
import { useKeepAliveStore } from '@/stores/keepAlive'

// 一级视图缓存
const keepStroe = useKeepAliveStore()
const firstKeepAliveRoute = keepStroe.firstKeepAliveRoute


onMounted(() => {});
</script>

<template>
  <router-view v-slot="{ Component,}">
    <keep-alive :include="firstKeepAliveRoute">
      <component :is="Component"/>
    </keep-alive>
  </router-view>
</template>

<style scoped></style>

后来我把key 去了。发现没那么卡了。但是声明周期钩子函数执行2次，或者多次，切换页面也不是很流畅，这不是我想要的结果。经过一番探索。我灵机一动。我什么要添加那么多视图。不需要啊。我们做管理系统 都是菜单切换。索性我就保留一层视图routerView 不需要多级的routerView。我的childeren路由不需要component 去加载一个空routerView 因为我父级children都redirect 子级chilren的一个路由了。

就这样 完美解决了 缓存的问题。不需要包裹多级routerView。一级routerView 去加载一个多层级的children路由也能正常访问。生命周期钩子也能正常执行，且执行一次。完美。

欢迎有遇到一样问题的同学们看到此文章能解决你们的问题。