vue页面缓存全局

页面缓存是Web应用程序中常见的技术。它可以在用户访问一个页面时，将该页面的内容保存在浏览器缓存中。当用户再次访问该页面时，缓存中已保存的页面内容可以被重新使用，以提高页面的加载速度和用户体验。在Vue应用程序中，页面缓存也可以被全局启用。

为了启用Vue的页面缓存功能，我们可以在Vue项目的根目录新建一个vue.config.js文件，并在该文件中添加以下代码：

module.exports = {
  chainWebpack: config => {
    config.plugins.delete('prefetch')
  }
}

这段代码的作用是禁用预加载功能。预加载会在页面加载时同时加载所有的页面组件，从而降低了应用程序的性能。如果我们启用了页面缓存，预加载也将失去其意义。

接下来，我们需要在需要缓存的页面组件中添加<keep-alive>标签。该标签可以将一个动态组件缓存起来，以避免重新渲染该组件。

<template>
  <div>
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

在以上代码中，我们将<router-view>标签用<keep-alive>标签包裹起来，以启用页面缓存。此时，当用户在页面之间切换时，前一个页面的状态将被保留，并且它的DOM将被缓存，以避免重新渲染该组件。

如果我们需要手动清除页面缓存，可以使用以下代码来实现：

this.$nextTick(() => {
  this.$refs.keepAliveRef.cache["nameOfComponent"].componentInstance.doSomething();
})

以上代码中，nameOfComponent是需要清除缓存的组件的名称，doSomething()是当前组件中的方法名。我们可以使用以上代码来清除缓存，并重新渲染该组件。

总之，Vue的页面缓存可以有效提高应用程序的性能和用户体验。通过全局启用页面缓存，我们可以简单地缓存页面组件，并在需要时手动清除缓存。