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, 说明组件缓存成功🎜