keep-alive include of vue.js not working - Stack Overflow

Question

As long as my project has the keep-alive tag, no matter what you write in exclude, it will cache all pages.

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

Need a solution?

Answer 1

I also found this problem, the include is the same, it doesn’t work! Please why

Answer 2

You are exclude

Answer 3

Currently it seems that you cannot use include and exclude directly when using vue-router

I can only write like this

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

Refer to issue#811 of vue-router

Answer 4

exclude is no problem at all,
a few points to note,

1. vue-router version must be 2.1+

2. For components with exclude set, if the component with the same name is switched, it will still be cached. This is because the components are reused

3. Set a name to the component

4. exclude sets the name of the corresponding component

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

Open the above example,
Click /params/foo and the content will change from 1234 at the beginning to 2345 after 1 second/params/foo 内容会由一开始的1234, 1秒后变成2345
再点击/optional-group/foo/bar
最后再点击/params/fooClick again /optional-group/foo/bar

Finally, click /params/foo, and the result will be 1234, which changes to 2345 after 1 second, indicating that the component has not been cached

exclude="foo2"Delete

in the code
Repeat the above 3 steps again,

You will find that 1-2 are the same as above, but in the third step, 2345 will appear directly on the page, indicating that the component is cached successfully🎜