The exclude property allows to specify the component which need not cached while component added dynamically or directly. The possible value can be either string, Regex or array. If specified with keep-alive it will not cached only components with matching names.
Exclude property with string
Exclude property with string
1 <template>
2 <div>
3 <a @click="component = 'ChildOne'">Child One</a
4 ><a @click="component = 'ChildTwo'">Child Two</a>
5 <hr />
6 <keep-alive exclude="ChildOne">
7 <component :is="component" />
8 </keep-alive>
9 </div>
10 </template>
In the above example, a component element bind with component property component that renders component dynamically when user click on links. An element keep-alive specified with attribute exclude by assigning a name of component ChildOne, it does not cache only specified component and other component will be cached when render on user click.
Exclude property with comma separated string
Exclude property with comma separated string
1 <template>
2 <div>
3 <a @click="component = 'ChildOne'">Child One</a
4 ><a @click="component = 'ChildTwo'">Child Two</a>
5 <hr />
6 <keep-alive exclude="ChildOne,ChildTwo">
7 <component :is="component" />
8 </keep-alive>
9 </div>
10 </template>
In the above example, an element keep-alive specified with exclude attribute by specifying a comma separated components which should not cached. If any other component specified using anchor element, it will be cached when rendered on clicking link.
Note: No extra space between strings, otherwise it will not work, it cached only components specified before space.
Exclude property with Regex
Exclude property with Regex
1 <template>
2 <div>
3 <a @click="component = 'ChildOne'">Child One</a
4 ><a @click="component = 'ChildTwo'">Child Two</a>
5 <hr />
6 <keep-alive :exclude="/ChildOne|ChildTwo/">
7 <component :is="component" />
8 </keep-alive>
9 </div>
10 </template>
In the above example, an element keep-alive is specified with exclude attribute by assigning a regular expression that matches with component name and if component name match with expression, it will not cache, otherwise it will be cached when user click on links.
Note: As Regex is not plain string, it is an expression, so we have to use property binding using v-bind: or short form :include.
Exclude property with Array
Exclude property with Array
1 <template>
2 <div>
3 <a @click="component = 'ChildOne'">Child One</a
4 ><a @click="component = 'ChildTwo'">Child Two</a>
5 <hr />
6 <keep-alive :exclude="['ChildOne', 'ChildTwo']">
7 <component :is="component" />
8 </keep-alive>
9 </div>
10 </template>
In the above example, an element keep-alive is added using exclude attribute by assigning an array that includes name of component, it can be used if you want to specify components in configuration or in database, which component should not be cached.
Related options for your search