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>
      <router-view v-if="$route.meta.keepAlive" />
    keep-alive>
    
    <router-view v-if="!$route.meta.keepAlive" />
  div>
template>
1
2
3
4
5
6
7
8
9
10

(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, //需要缓存的页面
    },
  },
1
2
3
4
5
6
7
8
9
10
11

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

<template>
	<div>
		<el-page-header @back="goBack" :content="this.$route.query.name"> el-page-header>
	div>
template>
1
2
3
4
5

 methods: {
    //返回上一页
    goBack() {
     //
      if (window.history.length <= 1) {
        this.$router.push({ path: "/" });
        return false;
      } else {
        this.$router.push({ path: "/" });
      }
    },
}
1
2
3
4
5
6
7
8
9
10
11
12

三、博主致谢

感谢小伙伴们，耐心的阅读完本篇文章，关注👉 水香木鱼🔔 获取更多精彩文章！

⭐⭐⭐ 做为小可爱的你，别忘记一键三连呦!