页面缓存

注意

开启缓存必须保证每个页面组件必须设置 name ，并且确保 name 唯一。

我们只要在需要进行缓存的路由 meta 对象里配置 cache 参数即可。这个参数可接受以下 3 种类型：

boolean
string
string[]

boolean 很好理解，当设置为 true 时，该页面只要一被访问，就会被缓存。例如有一个新闻管理的模块，我们把新闻列表页设置为 cache: true 后并访问，然后从新闻列表页点击某条记录进入新闻详情页，这时候再从新闻详情页返回新闻列表页时，新闻列表页上的数据是不会重新加载，而是保留了当时离开时的状态。

但这个方案也有一个弊端，就是该页面一旦访问就永久被缓存住了（除非手动进行浏览器刷新），如果用户从新闻列表页进入的不是新闻详情页，而是其它模块的页面，比如上一级页面，这时候其实是不希望新闻列表页被缓存的。这种情况下，框架支持设置 string 和 string[] 两个类型的参数值。

首先不管设置 string 还是 string[] ，你需要设置的值，都是路由的 name 。

怎么理解呢？还是用上面的例子，如果有两个模块，一个新闻管理，一个用户管理。当从新闻列表页进入新闻详情页的时候，需要对新闻列表页进行缓存，而从新闻列表页进入用户列表页，则不需要对新闻列表页进行缓存，我们就可以对新闻列表页的路由设置成：

src/views/
└── news/
    ├── [id].vue
    └── index.vue

vue

<!-- /src/views/news/index.vue -->
<script setup lang="ts">
definePage({
  meta: {
    title: '新闻列表页',
    cache: '/news/[id]',
  },
})
</script>

这表示从新闻列表页进入新闻详情页时，新闻列表页才会被缓存，进入其它任何页面都不会缓存。

当然也可将 cache 设置成 name 数组。

src/views/
└── news/
    ├── create.vue
    ├── detail.[id].vue
    └── index.vue

vue

<!-- /src/views/news/index.vue -->
<script setup lang="ts">
definePage({
  meta: {
    title: '新闻列表页',
    cache: ['/news/detail.[id]', '/news/create'],
  },
})
</script>

这样就表示从新闻列表页进入新闻详情页或新增新闻页时，新闻列表页才会被缓存，进入其它任何页面都不会缓存。

还有一种场景，就是某个页面始终开启缓存，仅在某些特定条件下才关闭缓存。例如有一个新闻管理的模块，我们希望新增新闻页始终开启缓存，因为在进行新增操作时，可能需要跳转到新闻分类管理的页面进行新增分类的操作，或者是其他页面进行一些操作，当返回新增新闻页时，需要将它缓存。一旦新闻新增成功，返回到新闻列表页时，新增新闻页就不再需要缓存了。

我们只要在需要进行缓存的路由 meta 对象里配置 noCache 参数即可。这个参数可接受以下 2 种类型：

string
string[]

针对上述场景，我们就可以对新增新闻页的路由设置成：

src/views/
└── news/
    ├── create.vue
    └── index.vue

vue

<!-- /src/views/news/create.vue -->
<script setup lang="ts">
definePage({
  meta: {
    title: '新增新闻页',
    cache: true,
    noCache: '/news/',
  },
})
</script>

页面缓存 ​

页面缓存