vue 中keep-alive的使用

一、在路由切换文件中

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

<!-- 不会被keepAlive -->
<router-view v-if="!$route.meta.keepAlive"></router-view>

二、路由定义方式

{
  path: '/home',
  name: 'home',
  component: 'home',
  meta: { keepAlive: true }   // 会被keepalive
}，
{
  path: '/index',
  name: 'index',
  component: 'index',
  meta: { keepAlive: false }  // 不会被keepalive
}

如果缓存的组件在缓存后需要重新更新数据或者执行函数，可以在activated生命周期钩子中进行

activated(){
   //执行某函数或对数据进行操作
}