keep-alive主要用于保存组件的状态。由于在单页面应用中,使用vue-router时,vue-router在切换路由的时候是会销毁组件实例的,新路由的组件会重新实例化。在需要保存路由组件的状态或者有性能方面的考虑的时候,就需要用到keep-alive 了。
使用:
vue-router中需要给定一个状态标志组件是否需要keepalive,例如:
{
path: '/charts',
component: Charts
},
{
path: '/historyData',
component: HistoryData,
meta: {
keepAlive: true
}
}
路由组件占位,利用v-if渲染相关路由组件,例如:
<!-- 需要缓存的组件 -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 不需要缓存的组件,这个必须要 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>