Vue3多路由指向同一组件 实现keep-alive缓存页面的解决方案

       不同的路由共同使用一个组件，根据路由路径或者名称等展示不同的页面，并用keepAlive实现不同的页面缓存。
       需求：十几个路由使用的组件是同一个，从一个页面到另一个页面或者其他页面的时候，让之前输入的数据还存在。

keep-alive可以接收3个属性做为参数进行匹配对应的组件进行缓存:

include 字符串或正则表达式，只有名称匹配的组件会被缓存。
exclude字符串或正则表达式，任何名称匹配的组件都不会被缓存。
max 数字类型,最多可以缓存多少组件实例（如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间）。
       它会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项。
        以下写法直接写是肯定不行的，十几个路由name肯定都不一样。一个组件最多也就提供一个对应的name，以下方式肯定不行。

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

        要想实现效果，就必须换一种写法，要对路由组件中的component用一个方法进行处理。在原本的组件的基础上再创建一个组件，相当于做了一层封装，并重新定义nam