nuxt2如何实现页面缓存

Nuxt.js 2.x 中可以使用两种方式实现页面缓存：

1. 缓存整个页面：

可以在页面组件中加入 `cache` 属性来缓存整个页面，如下所示：

export default {
  cache: true,
  // ...
}

2. 缓存部分页面：

可以利用 `asyncData` 或 `fetch` 方法来缓存部分页面，利用 `keep-alive` 组件来保留组件状态，如下所示：

<template>
  <div>
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

<script>
export default {
  asyncData({ store, route }) {
    if (route.meta.cacheKey) {
      return store.dispatch('fetchData', route.meta.cacheKey)
    }
  },
  watch: {
    $route(to, from) {
      if (!to.meta.keepAlive && !from.meta.keepAlive) {
        this.$destroy()
      }
    }
  }
}
</script>

上述代码中，我们通过 `keep-alive` 组件来缓存需要缓存的组件，并且利用 `asyncData` 方法来在服务器端缓存数据。同时，我们可以在路由元信息中添加 `cacheKey` 属性来指定缓存数据的键名。当路由发生切换时，我们可以通过 `$destroy` 方法来销毁不需要缓存的组件，从而实现页面缓存。