在项目中经常会遇到需要设置部分页面缓存，在路由切换时，不必每次都拉取接口更新，这样可以很大程度的提升用户体验，也可以减少接口请求次数，降低服务器消耗；

首先我们先了解下vue这个框架在页面缓存知识

1：keep-alive 组件； 说明： 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们；

   |- include 属性  说明： 只要include包含组件name则缓存下来；     官方解释：允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示
   |- exclude 属性  说明： 只要exclude包含组件name则不缓存下来；   官方解释：组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示

2： 路由配置参数中的 scrollBehavior 滚动行为，主要记录滚动位置的，我们不仅可以利用来记录缓存页面滚动的位置，还可以利用 savedPosition 知道页面到底是前进 还是 后退
	const RouterConfig = {
		mode: "hash", //hash history
		routes: Routers,
		scrollBehavior: function (to, from, savedPosition) {
			// console.log(to) // to：要进入的目标路由对象，到哪里去
			// console.log(from) // from：离开的路由对象，哪里来
			// console.log(savedPosition) // savePosition：会记录滚动条的坐标，点击前进/后退的时候记录值{x:?,y:?}
			// 从第二页返回首页时savedPosition为undefined
			if (savedPosition || typeof savedPosition === 'undefined') //后退
			{
			  //后退滚动到上一次位置
			  if (savedPosition) { return savedPosition }
			} else { //前进

			  //前进滚动到顶部
			  return {x:0,y:0}
			}
		}
	} 

3：vue 生命周期 中的 2个钩子  activated 和 deactivated

	activated      keep-alive 组件激活时调用  下面简单讲解下，建议看vue官方文档细致了解下
	deactivated    keep-alive 组件停用时调用  下面简单讲解下，建议看vue官方文档细致了解下

	啥意思呢？如果不使用 keep-alive，我们经常在 created 中执行页面打开前的动作，比如：ajax获取数据；

		不使用 keep-alive   打开页面 执行 created
		使用   keep-alive   打开页面 执行 created  之后又会执行 activated ，如果此时返回上一页（就是缓存的页面）那么只执行 activated

		再解释下: 就是使用了 keep-alive 打开新页面会执行 created+activated 2个钩子 ，如果返回到缓存的页面，此时缓存页面不执行 created了，如果此时你业务需要返回 alert(1),那么这个 alert(1),只能放在activated中，
		放在created中无效；

下面介绍一下我在项目中用到的添加页面缓存的方法；

1.路由文件

//router/index.js
const routes = [
  {
    path: "/",
    name: "home",
    component: Home
  },
  {
    path: "/card-goods-index",
    name: "card-goods-index",
    component: () => import("@/views/card-goods/card-list.vue"),
    meta: {
      title: "首页",
      index: 1
    }
  },
  {
    path: "/card-package-index",
    name: "card-package-index",
    component: () => import("@/views/card-goods/card-package.vue"),
    meta: {
      title: "卡券包",
      index: 2
    }
  }
]

2.app.vue

<!--app.vue-->

<template>
  <div id="app">
    <transition :name="transitionName">
        <keep-alive :include="cachedViews" :exclude="normalViews">
            <router-view :key="1" />
        </keep-alive>
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      url: "",
      transitionName: "", // 默认动画
      cachedViews: ["card-goods-index"], // 需要缓存的页面数组
      normalViews: [] // 不需要缓存的页面数组
    };
  },
  watch: {
    $route(to, from) {
      // 将其他页面添加到缓存
      if (
        !this.cachedViews.includes(to.name) &&
        !this.normalViews.includes(to.name)
      ) {
        this.cachedViews.push(to.name);
      }
    }
  }
};
</script>

<style>


</style>

3.card-goods-index.vue

<!--card-goods-index.vue-->

<template>
  <div class="main-content">
    <!--card-goods-index.vue-->
  </div>
</template>

<script>
export default {
  name: "card-goods-index",
  data() {
    return {
      url: "",
    };
  }
};
</script>

<style>


</style>

这个地方一定要注意，需要缓存的组件一定要设置name属性，并且要和router中组件的name和app.vue中需要缓存素组内的name保持一致才能生效。