keep-alive页面缓存

keep-alive页面缓存

当你希望某个页面不被重新渲染,就可以使用Vue的keep-alive组件,不仅可以缓存当前页面数据,还可以避免多次重复渲染降低性能。

1、在组件中添加name

export default {
name: 'article',
// keep-alive的生命周期 //
初次进入时：created > mounted > activated 
// 再次进入：只会触发 activated 
activated () { // to do.. }, 
// 退出后触发 deactivated 
deactivated () { // to do.. } 
}

2、在路由出口处用keep-alive组件包裹住

<!-- 路由出口 --> 
<!-- include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。 max - 数字。最多可以缓存多少组件实例。 --> 
<keep-alive include="article"> 
<router-view></router-view> 
</keep-alive>

3、示例

<div class="content">
<transition name="move" mode="out-in">
<keep-alive :include='topNavMentNames'>
<router-view></router-view>
</keep-alive>
</transition>
</div>