不同的路由共同使用一个组件，根据路由路径或者名称等展示不同的页面，并用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用一个方法进行处理。在原本的组件的基础上再创建一个组件，相当于做了一层封装，并重新定义name。使用Map对新创建的组件进行存储。

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

// 用来存已经创建的组件
const storeComponents = new Map();
// 原组件包里面
function formatComponent(component, route) {
    let afterComponent;
    if (component) {
        const path = route.path;
        if (storeComponents.has(path)) {
            afterComponent = storeComponents.get(path);
        } else {
            afterComponent = {
                name: path,
                render() {
                    return h(component);
                },
            };
            cacheRoutes.push(path);   //进行缓存
            storeComponents.set(path, afterComponent);
        }
        return h(afterComponent);
    }
}