keep-alive 使组件或路由切换过程中将状态保留在内存中,防止重复渲染DOM。
在2.1.0版本以前Vue中
<!-- 注意:transition中只能一个元素结构,所以这里要分开写 -->
<transition :name="transitionName">
<keep-alive>
<router-view class="Router" v-if="$route.meta.keepAlive">
<!-- 这里是会被缓存的视图组件,比如 Home! -->
</router-view>
</keep-alive>
</transition>
<transition :name="transitionName">
<router-view class="Router" v-if="!$route.meta.keepAlive">
<!-- 这里是不被缓存的视图组件,比如 Edit! -->
</router-view>
</transition>
路由中定义keepAlive属性
{ path: '/page1', name: 'page1', component: Page1, meta: { cnName: 'page1',keepAlive: true}}
在2.1.0版本以后Vue中
<transition :name="transitionName">
<!--注意:使用了inlcude/exclude 要给组件或组件路由增加name属性-->
<keep-alive :include="includedComponents">
<router-view class="Router" ></router-view>
</keep-alive>
</transition>
路由中定义不用定义keepAlive属性
{ path: '/page1', name: 'page1', component: Page1, meta: { cnName: 'page1'}},
使用keep-alive会增加钩子
activated(){
alert('使用keep-alive特有事件钩子,在每次进入都触发activated,但不会触发created、mounted等钩子')
},
deactivated(){
alert('使用keep-alive特有事件钩子,在每次退出都触发deactivated')
},
keep-alive组件的使用,组件的切换还会保存在内存中
<button type="button" @click="showHandle">切换组件</button>
缓存组件
<keep-alive>
<components1 v-if="show1"/>
<components2 v-if="!show1"/>
</keep-alive>