項目場景：
場景一：
使用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>