Vue项目列表页到详情页时进行查询条件缓存

废话

产品要求对运营管理后台的列表页到详情页时进行查询条件缓存，因为项目组前端高架说没法实现（原因咱也不知道），所以这件事咱就接下了。谷歌了一圈没有一个具体的实现，所以当初基本上实现都是自己实现的。当时思考调研的方案：

1. 方案一keep-alive对路由进行缓存
2. 方案二链接拼接，注意中文过长时的保留utf-8不转义
3. 方案三参数一长串进行编码作为参数，然后再转码（复杂度高&可复用性不高）

---

一、具体实现

store中设置keepAliveRoute初始值为空数组；Index.vue中具体实现如下：

<template>
  <div>
        <keep-alive :include="keepAliveRoute">
          <router-view />
        </keep-alive>
  </div>
</template>

<script>
import { mapGetters} from 'vuex'

export default {
  computed: {
    ...mapGetters(['userName', 'keepAliveRoute'])
  },
  watch: {
    $route(to, from) {
      const targetRouteList = from.meta?.targetRouteNames
      const targetRoute = to.name
      // 判断当前路由是否缓存
      if (this.keepAliveRoute.includes(targetRoute)) return
      // 初次加载缓存
      if (to.meta.keepAlive) {
        this.setKeepAliveRoute([targetRoute])
        return
      }
      // 离开清除当前keep-alive
      if (targetRouteList) {
        const has = targetRouteList.findIndex((item) => item === targetRoute)
        if (has === -1) this.setKeepAliveRoute([])
        return
      }
      this.setKeepAliveRoute([])
    }
  },
  created() {
    if (localStorage.getItem('keepAliveRoute')) {
      this.setKeepAliveRoute(JSON.parse(localStorage.getItem('keepAliveRoute')))
    }
  },
  beforeUpdate() {
    // 避免在当前列表页面刷新时，缓存路由消失了，再跳转目标路由时不缓存，只有点两次才缓存的问题
    localStorage.setItem('keepAliveRoute', JSON.stringify(this.keepAliveRoute))
  },
  methods: {
    ...mapActions(['setKeepAliveRoute'])
  }
}
</script>

二、使用事项

路由缓存的使用，配置以下三个参数：.
name：路由的name属性，命名规范与组件内的name必须一致（重点），命名格式ComponentName
keepAlive: 是否缓存的路由，用于初次进来的
targetRouteNames：跳转到对应的目标路由时缓存，Array类型，对应目标路由里的name属性
对应的缓存页记得使用activated生命周期

1.router配置

meta: {
	name: 'ComponentName', // 必须与组件内的name相同，这里采用规范性写法‘双驼峰’
	keepAlive: true,// 初次进来
    targetPaths: ['ChildComponentName'] // 目标路由使用缓存，否则销毁
}

2.列表页

name: '', // 必须存在，而且与缓存时的路由name属性对应
activated() {
  // 调用获取数据接口，因为在keep-alive中状态不会不见
},

3.目标路由（详情页、审核页等）

name: '', // 必须存在，而且与targetPaths的值对应

---

总结

实现了列表详情页到目标页的查询条件缓存，当从该缓存列表页跳转至非目标路径时，销毁缓存。无法解决的问题：刷新后缓存数据清空，但是解决了刷新带来的其他问题（上面有说）。以上都是自己写的，毕竟年限实力有限，如果有更好的方案欢迎讨论！！！