背景

Vue 2.0 出现keep-alive 缓存功能。本文使用场景：多页签的后台管理系统，缓存tab页内容。

开启

在路由切换外层包裹 标签。

<keep-alive >
      <router-view :key="key" />
</keep-alive>

只给部分页面开启

利用include属性

<keep-alive include="userManage">
      <router-view :key="key" />
</keep-alive>

排除部分页面开启

利用exclude属性

<keep-alive exclude="roleManage">
      <router-view :key="key" />
</keep-alive>

注意：使用include/exclude 属性需要给所有vue类的name赋值。注意不是路由的name，而是页面组件的name

export default {
  name: "roleManage",
}

开启后走的生命周期

keep-alive 会多2个生命周期，activated,deactivated这两个生命周期函数

  created() {
    console.log('created')
  },
  mounted(){
    console.log('mounted')
  },
  activated(){
    console.log('activated')
  },
  deactivated(){
    console.log('deactivated');
  },
  destroyed(){
    console.log("destroyed-被销毁")
  },

首次进入并离开：created -> mounted -> activated -> deactivated

二次进入并离开：activated -> deactivated

我们会发现，destroyed 这个一直没有执行。因为页面被缓存了所以一直不存在销毁。