ue2.0 keep-alive缓存整个页面

在 Vue 2.0 中，可以使用 `<keep-alive>` 组件来缓存整个页面。该组件可以包裹需要缓存的组件，并在组件被切换时自动缓存和销毁。

例如，我们有两个组件 `A` 和 `B`，我们希望在切换这两个组件时保留它们的状态，可以使用 `<keep-alive>` 组件：

<template>
  <div>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>

<script>
import A from './A.vue'
import B from './B.vue'

export default {
  components: {
    A,
    B
  },
  data() {
    return {
      currentComponent: 'A'
    }
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'A' ? 'B' : 'A'
    }
  }
}
</script>

在上面的代码中，我们通过 `keep-alive` 包裹了一个动态组件，根据 `currentComponent` 的值动态切换 `A` 和 `B` 组件。当组件被切换时，`keep-alive` 组件会缓存当前组件的状态，等到下一次再切换回来时，会直接使用缓存的状态，而不是重新渲染组件。

需要注意的是，如果需要缓存的组件内部有异步操作或者定时器，可能会导致缓存的状态不正确，需要在组件的生命周期钩子函数中做好清理工作。