【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>