根据我踩坑的教训，首先我们要明确自己使用的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>