最近在项目开发中正好遇到多路由指向同一组件无法实现页面缓存，网上很多keep-alive的实现方案都是通过name属性去实现的（设置路由的
name与页面的name一致，通过getCahes加载缓存的名称），但是由于多路由指向同一组件的情况无法显示的去设置组件的name。
解决方案一：
路由meta中添加一个keepAlive的参数去控制缓存,并且给组件设置key=route.fullpath去做区分，通过v-if去控制缓存，不再通过name。修改方
案如下图：（这种写法会导致关闭这个页面后再次进入依然有缓存的情况，比较坑的是keep-alive没有提供手动删除缓存的方法，下面有第二种解决方案）
注释：这个Vue3的写法，Vue2写法如下：
<div id="app">
<!--keep-alive 表示页面不会被销毁，即保持页面状态-->
<keep-alive>
<router-view v-if="$route.meta.keepalive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepalive"></router-view>
</div>
解决方案二：
给component重新命名，项目涉及到多个路由调用同一个组件，只要确保路由名称唯一就行。
第一步重写名称：（给component组件重命名的方法，参考了网友的写法）
const wrapperMap = new Map()
const wrap = (name, component) => {
let wrapper
const wrapperName = name
if (wrapperMap.has(wrapperName)) {
wrapper = wrapperMap.get(wrapperName)
} else {
wrapper = {
name: wrapperName,
render() {
return h("div", { className: "vaf-page-wrapper" }, component)
},
}
wrapperMap.set(wrapperName, wrapper)
}
return h(wrapper)
}
第二步：修改keep-alive
<router-view>
<template #default="{ Component, route }">
<keep-alive :include="getCaches">
<component :is="wrap(route.name, Component)" :key="route.fullPath"/>
</keep-alive>
</template>
</router-view>
