在项目中经常会遇到需要设置部分页面缓存，在路由切换时，不必每次都拉取接口更新，这样可以很大程度的提升用户体验，也可以减少接口请求次数，降低服务器消耗；
首先我们先了解下vue这个框架在页面缓存知识
1：keep-alive 组件； 说明： 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们；|- include 属性 说明： 只要include包含组件name则缓存下来；官方解释：允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示|- exclude 属性 说明： 只要exclude包含组件name则不缓存下来； 官方解释：组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示2： 路由配置参数中的 scrollBehavior 滚动行为，主要记录滚动位置的，我们不仅可以利用来记录缓存页面滚动的位置，还可以利用 savedPosition 知道页面到底是前进 还是 后退const RouterConfig = {mode: "hash", //hash historyroutes: Routers,scrollBehavior: function (to, from, savedPosition) {// console.log(to) // to：要进入的目标路由对象，到哪里去// console.log(from) // from：离开的路由对象，哪里来// console.log(savedPosition) // savePosition：会记录滚动条的坐标，点击前进/后退的时候记录值{x:?,y:?}// 从第二页返回首页时savedPosition为undefinedif (savedPosition || typeof savedPosition === 'undefined') //后退{//后退滚动到上一次位置if (savedPosition) { return savedPosition }} else { //前进//前进滚动到顶部return {x:0,y:0}}}} 3：vue 生命周期 中的 2个钩子 activated 和 deactivatedactivatedkeep-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.jsconst 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保持一致才能生效。
