vue页面做缓存

在Vue中，可以使用`<keep-alive>`组件来给路由组件做缓存。这样在切换路由时，对应的组件会被缓存，再次访问时能够快速呈现，而不会重新渲染。 首先，需要在路由配置中设置`<keep-alive>`组件，以便对路由组件进行缓存。

以下是一个简单的示例，展示了如何在Vue中使用`<keep-alive>`组件来给路由组件做缓存：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home,
      meta: { keepAlive: true } // 设置需要缓存的路由
    },
    {
      path: '/about',
      component: About,
      meta: { keepAlive: true } // 设置需要缓存的路由
    }
  ]
});

export default router;

在路由配置中，我们设置了`meta`字段来标记需要缓存的路由，然后在路由组件的模板中使用`<keep-alive>`组件包裹路由组件，以实现对该组件的缓存。

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

<script>
export default {
  name: 'App',
  mounted() {
    console.log('App component mounted');
  }
}
</script>