?1. keep-alive緩存組件的作用

使用vue開發時：有ABC頁面，A跳轉B，B跳轉C，C返回跳轉B，B返回跳轉A

但是：可能會出下這個問題：從A-B-C正常，但當從B返回A時，會報錯，這是因為從B返回A時，傳遞的參數并不是從A到B的參數

所以：需要將B組件或頁面緩存起來，就可以解決這個問題，緩存可以用vue 中的keep-alive標簽，使用方法如下：

?加上判斷條件，如果keepAlive為true，那么就緩存該組件，也就是用keep-alive包裹它
如果為false，那么就不包裹

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

通過設置keepAlive的true或false來決定該組件是否緩存

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

??2. keep-alive清除緩存組件的作用

B跳轉A頁面是，直接清除緩存，則讓A頁面強制刷新

監聽路由跳轉，但監聽到跳往的頁面是A頁時，直接刷新

<keep-alive><router-view v-if="$route.meta.keepAlive"></router-view></keep-alive><router-view v-if="!$route.meta.keepAlive"></router-view>``````````````````````````````````````````````````````watch: {$route(to, from) {if (to.name === "B" && from.name) {this.$router.go(0); // 刷新該頁面}} }

?

總結

以上是生活随笔為你收集整理的keep-alive清除缓存的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。