javascript - vue.js的keep-alive include無效

Question

#我的專案只要是寫了keep-alive標籤，無論你exclude裡面寫了什麼，它都會全部頁面都快取。

<keep-alive exclude="xxx,yyy">
   <router-view></router-view>
</keep-alive>

求解啊？

Answer 1

同樣發現這個問題，include也一樣，沒用！ 請問為什麼

Answer 2

你這是 exclude 啊

Answer 3

目前似乎使用vue-router不能直接用include,exclude

只能這樣寫

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

參考vue-router的issue#811

Answer 4

exclude 完全沒問題,
幾個注意點,

1. vue-router 的版本必須是2.1+

2. 設定了exclude的組件, 如果是同名組件切換, 一樣會緩存, 這是因為組件復用

3. 給組件設定name

4. exclude設定對應組件的name

https://jsfiddle.net/lincenyi...

打開上面的例子,
點擊/params/foo 內容會由一開始的1234, 1秒後變成2345/params/foo 内容会由一开始的1234, 1秒后变成2345
再点击/optional-group/foo/bar
最后再点击/params/foo再點擊/optional-group/foo/bar

最後再點擊/params/foo, 出現的結果一樣是1234, 1秒後變成2345, 說明組件沒被緩存

exclude="foo2"刪除 程式碼中的

再重複上面的3個步驟,

會發現1-2和上面一樣, 但是第三個步驟時, 頁面會直接出現2345, 說明組件緩存成功🎜