vue实现keep-alive页面缓存【三步骤配置，一步到位】

一、博主介绍

💒首页:​​水香木鱼​​

🛫专栏：​​后台管理系统​​

✍简介: 博主:花名 “水香木鱼”，星座"水瓶座一枚"

🔰 格言: 生活是一面镜子。 你对它笑， 它就对你笑； 你对它哭， 它也对你哭。

🔋 充电：相信付出终将会得到回报!

二、笔芯文章

详细的keep-alive 配置项，请阅读如下内容👇

(1)、App.vue【增加keep-alive标签】

在app.vue 跟文件下，添加​​keep-alive​​​ 标签；
此处划分：
①​​​需要缓存​​​页面配置
②​​​不需要缓存​​页面配置👇

• ​​v-if="$route.meta.keepAlive"​​
• ​​v-if="!$route.meta.keepAlive" ​​

<template>
  <div id="app">
    <!--需要缓存的keep-alive配置 展示内容-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <!--不需要缓存的keep-alive 配置 展示内容-->
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

(2)、router.js【配置keep-alive （meta属性）】

在router.js 中，需要缓存的页面路由内，配置 ​​meta: { keepAlive: true, //需要缓存的页面 },​​

• keep-alive:​​true ​​【需要缓存页面】
• keep-alive:​​false ​​【不需要缓存页面】

//首页
  {
    path: "/home",
    name: "home",
    component: (results) =>
      require([/* webpackChunkName: "home" */ "@/views/Home"], results),
    //配置keep-alive 的状态  
    meta: {
      keepAlive: true, //需要缓存的页面
    },
  },

(3)、详情页【添加返回上一页事件】

注意：必须 使用 ​​this.$router.go(-1);​​​ 才能生效，其他返回形式有待测试。【复制如下​​goBack​​​事件即可
】

<template>
  <div>
    <el-page-header @back="goBack" :content="this.$route.query.name"> </el-page-header>
  </div>
</template>

methods: {
    //返回上一页
    goBack() {
     //
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
}