【vue】keep-alive清除缓存最简单暴力的方法

项目场景：

场景一：
使用vue开发移动端，
有ABC三个页面，点击A跳转到B，点B跳转到C；
点C返回B，点B返回A。


场景二：
场景一实现之后，会出现这样一个问题：
先从A跳转到B，B页面会被缓存下来，
当再从D跳转到B时，B页面并不会更新。

---

解决方案：

场景一可能会出下这个问题：从A-B-C正常，但当从B返回A时，会报错，这是因为从B返回A时，传递的参数并不是从A到B的参数，所以需要将B组件或页面缓存起来，就可以解决这个问题，缓存可以用vue’中的keep-alive标签，使用方法如下：

1，加上判断条件，如果keepAlive为true，那么就缓存该组件，也就是用keep-alive包裹它
如果为false，那么就不包裹

    <div id="app">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>

2，通过设置keepAlive的true或false来决定该组件是否缓存

const routes = [
  {
    path: "/",
    name: "Home",
    component: () => import("@/views"),
    meta: {
      keepAlive: false,
    },
  },
  {
    path: "/list",
    name: "List",
    component: () => import("@/views/list"),
    meta: {
      keepAlive: true,
    },
  },
];

场景一目前已经实现，但之后又遇到场景二的问题，在网上搜索到的各种解决方法都有些复杂，所以我用了最简单粗暴的方法，就是每次返回A页面的时候，直接让A页面刷新，因为这个项目不大，一共也就十来个页面，所以这种方式的副作用对这个项目来说基本不存在影响，代码如下：
监听路由跳转，但监听到跳往的页面是home页时，直接刷新

<template>
    <div id="app">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
</template>

<script>
export default {
  watch: {
    $route(to, from) {
      if (to.name === "Home" && from.name) {
        this.$router.go(0);
      }
    },
  },
};
</script>