Vue实现前端页面缓存的过程

// home.vue
<template>
 <div>
   ...
  <keep-alive :include='cashViews'>
    <router-view></router-view>
  </keep-alive>
 </div>
</template>  
<script>
  export default{
    data() {
      return {
        // 要缓存的组件
        cashViews: ['list']
      }
    }
  }
</script>    

// list.vue
<script>
  export default{
    // 在组件内路由守卫钩子函数中处理逻辑
    beforeRouteEnter (to, from, next) {
      if (from.name === 'Index') { // 处理页面缓存后，返回首页再次进入缓存页时数据为更新
        // 该生命周期无法获取到this，因此把vm实例当作参数传递
        next(vm => {
          vm.pages.pageNum = 1
          // 因为我这里查询表单是动态的，所以首页进入时需要调用一次，在改方法中请求返回后调用了获取列表数据getTableDatas方法
          vm.getQueryList()
        })
      } else if (!from.name) { // 处理刷新页面时，获取动态表单方法未执行，导致表单无法加载
        next(vm => {
          vm.getQueryList()
        })
      } else {
        // 详情返回时只更新列表数据，因为如果在详情页面做了操作，列表数据状态会改变，其他使用缓存
        next(vm => {
          vm.getTableDatas()
        })
      }
    }
  }
</script>

  activated() {
   this.getTableDatas()
  },
  beforeRouterLeave(to, from, next) {
  if (from.name === 'Index') {
    // 如果从首页进入时调用重置方法
    this.reset()
  }
}

{  path: '/list',
  name: 'List',
  component: List,
  meta: {
    keepAlive: true
  }
}

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

// List.vue
export default {
  /* 从List组件离开时,修改keepAlive值为false，保证进入该页面时页面刷新
  */
  beforeRouteLeave(to, from, next) {
    from.meta.keepAlive = false
    next()
  }
}

// Detail.vue
export default {
  /*从Detail返回List时，修改List的keepAlive为true,确保返回List页面时使用缓存不刷新页面
  */
  beforeRouteLeave(to, from, next){
    if(to.name === 'List') {
      to.meta.keepAlive = true
    }
    next()
  }
}

routes：[
  {
     path: 'index',
     component: notice,
     meta: {
       keepAlive: true  // 是否缓存标志
     }
   }
]

<keep-alive>
  // 将需要缓存得页面写在keep-alive里面
  <view-router v-if="$route.meta.keepAlive"></view-router>
</keep-alive>
// 不需要缓存得页面写在外面
<view-router v-if="!$route.meta.keepAlive"></view-router>

// 在进入页面时先判断是否是从详情页面返回
beforeRouterEnter (to, from, next) {
  if(to.path === '/detail') {
    this.$route.meta.isBack = true
  }
  next()
},
activated () {
  // 如果不是从详情页面返回，则重新加载数据
  if (!this.$route.meta.isBack) {
    //加载页面数据
  }
  // 从新设置页面得路由元信息
  this.$route.meta.isBack = false
}