根据我踩坑的教训，首先我们要明确自己使用的vue-router是哪个版本，版本不一样，代码很可能不生效。
打开package.json文件，在dependenciesli里找到vue-router，大致位置如图所示:
image.png
可以看到我使用的vue-router版本是4.x。
以下代码在4.x的环境下才生效！
以下代码在4.x的环境下才生效！
以下代码在4.x的环境下才生效！
首先我们需要在路由中(router.config.ts)配置keepAlive,配置代码大致如下所示:
image.png
keepAlive为true表示该页面要执行缓存，值为false表示不缓存，
然后，我们找到用于展示路由页面的<router-view></router-view>，将其改为：
<router-view v-slot="{ Component }" >
<keep-alive>
<component :is="Component" v-if="$route.meta.keepAlive" :key="$route.path"/>
</keep-alive>
<component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.path"/>
</router-view>
如果vue-router是3.x版本的话，则将其改为：
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
