缓存不适合场景解决思路

[tracybug]

问题描述：
目前缓存的方案对于某些业务是不适合的，比如文章详情页这种 /article/1 /article/2，他们的路由不同但对应的组件却是一样的，所以他们的组件 name 就是一样的，就如前面提到的，keep-alive的 include 只能根据组件名来进行缓存，所以这样就出问题了。（以上摘自帮助文档）
解决目的： keep-alive 和 include 共存，缓存/article/1 /article/2这种情况的相同组件的各个不同实例，关闭后再次打开/article/1 /article/2 这种实现刷新
主要思路：目前vue-element-admin的AppMain.vue文件的 路由的key 是
this.$route.fullPath，/article/1 这种每次关闭页面再打开时对应的key是 相同的，因而无法刷新，
AppMain.vue文件修改如下：
`
key() {
let marker = window.sessionStorage.getItem(this.$route.fullPath)

  if (!marker) {

    window.sessionStorage.setItem(this.$route.fullPath, new Date())

    marker = window.sessionStorage.getItem(this.$route.fullPath)

  }

  return this.$route.fullPath + marker

}`

然后tagsView.js里DEL_VISITED_VIEW方法中添加：
if (!! view.fullPath) { window.sessionStorage.removeItem(view.fullPath) }，即在关闭顶部标签的时候，清除对应的映射，
我的项目这中映射关系简单交由sessionStorage维护，也可以vuex去管理。
目前我的项目使用这种方式解决，没有发现明显的问题，不够优雅的就是
<keep-alive :include="cachedViews"> 的cachedViews里有重复的组件名称，但不影响功能，include仅用于判断组件是否缓存，而组件实例的区别还是在于key。这种方案是否可以解决问题？是否有更好的解决方案？烦请试一下，感谢

[PanJiaChen]

我看了d2-admin的代码， 它用了一个比较取巧的方式。

比如页面有 article/1、article/2、article/3页面。那它页面就会存 datas:{data1,data2,data3}。多份数据，进入页面的时候再根据id去拿相应的数据。

楼上说的sessionStorage也是一种方法。之后我来分装一下吧，做成自动处理的方式。