页面缓存实现一个demo就够了

使用缓存作用

保存接口数据、减少请求、防止二次渲染、项目性能得到提升。

keep-alve

以我们的demo为例，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页，这时候我们使用keep-alive来缓存组件，效果如图：

• 那我们如何实现呢 1.在app.vue上写下这样代码（需要缓存的组件用keep-alive包裹住）

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

2、在router.js对应的需要缓存的组件设置meta:{keepAlive: true}，不需要缓存的组件meta:{keepAlive: false}

    {
        path: '/home',
        name: 'home',
        component: () => import('../home/home.vue'),
        meta: {
            keepAlive: true,
        }
    },
    {
        path: "/details",
        name: "details",
        component: () => import("../home/details/details.vue"),
        mata: {
            keepAlive: false,
        }
    },