vue 实现类似keep-alive功能缓存页面数据

vue的keep-alive功能是缓存页面的数据，但是存在缺点，比如从列表页的某一条数据到详情页，假如详情页有修改，再返回上个页面时，是不会主动刷新列表内容的。

而且，一个项目中可以有存在多个<router-view>，那么在加<keep-alive>时，就需要找到每一个<router-view>去加上。

以下是一种解决方法，有写得不对的，欢迎各位大佬指教。

建一个mixin.js文件，全局引用。

const mapData = new Map()  // 通过Map把数据存到本地
const mixin = {
  data () {
    return {
      keepAliveNextRouter: [] // 这个用来放跳转的路由路径，比如列表页要跳转到详情，需要把页面数据存起来，那么就把详情页的路同地址放到数组里,不过不在这里放，在每个列表页里放
    }
  },
// 列表页（需要缓存数据的页面）跳转之前，进行以下操作
  beforeRouteLeave (to, from, next) {
// 因为mixin是全局使用，所以全部页面都会混合这个文件。那么就需要做一下判断：页面有这个keepAliveNextRouter路由数组，且keepAliveNextRouter这个数组包含即将要跳转的路由地址的话，那么才把当前页面的数据缓存起来
    if (this.keepAliveNextRouter && this.keepAliveNextRouter.indexOf(to.path) >= 0) {
      const routePath = from.path
      mapData.set(routePath, this.$data)
    }
    next()
  },
// 当进入到页面时，判断是否有keepAliveNextRouter路由数组，且数组有值。那么再判断keepAliveNextRouter路由数组是否包含上一个页面的路由路径，如果包含，那么就拿到缓存起来的数据再附值回来给当前页。比如，从详情页进来，那么就把缓存的数据替换到当前页。
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (vm.keepAliveNextRouter && vm.keepAliveNextRouter.length === 0) return
      if (vm.keepAliveNextRouter && vm.keepAliveNextRouter.indexOf(from.path) >= 0) {
        const routePath = to.path
        const queryJson = mapData.get(routePath)
        if (queryJson) {
          for (const key of Object.keys(queryJson)) {
            vm.$data[key] = queryJson[key]
          }
        }
        mapData.delete(routePath)
      }
    })
  }
}
export default mixin

在全局引用。找到main.js文件。

import mixin from './plugins/mixin'
Vue.mixin(mixin)

调用页面。

<template>
<-- 代码 -->
</template>

<script>

export default {
  data () {
    return {
      keepAliveNextRouter: ['/pageA/detail'], // 要缓存参数的跳转路由
    }
  }
}

</script>

需要注意的点，beforeRouteEnter里next()里的代码执行是比created要慢的，所以如果是在created里执行刷新页面的代码，那么有可能还没把缓存的数据替换上去，就已经请求回来了页面数据了。意思是，请求数据的参数可能不是缓存的参数。所以可以在mounted里请求页面数据。