处理vue-element-admin中三级菜单keep-alive页面无法缓存

2024年4月27日 149次阅读 来源: 九段刀客

此方案存在缓存无法清除的问题，可以查看新的方案

https://blog.csdn.net/weixin_35958891/article/details/109331129

keep-alive页面缓存

页面缓存知识：
用keep-alive包裹的路由页面路由地址不改变时，组件实例不会被销毁不会触发created和mounted生命周期，但是会触发activated生命周期。

  • keep-alive生命周期
    activated：keep-alive 组件激活时调用。
    deactivated：keep-alive 组件停用时调用。

框架提供的方案

<keep-alive :include="cachedViews">
  <router-view :key="key" />
</keep-alive>

框架中提供的include只有名称匹配的组件会被缓存，在菜单中用noCalse关键字来判断是否缓存，将路由的name和组件的name设置成同样的名字的处理方式，在二级页面中有效，但是在三级页面中无效，查找了GitHub的issues上有开发者提到这样的bug，但是没有解决方案，而我们的项目比如：租赁管理-订单-订单列表，都是三级目录，所以无法采用框架中提供的方式来缓存。

现采用的方案

这里设置一个最大缓存个数

<keep-alive :max="20">
  <router-view :key="key" />
</keep-alive>
  • 默认缓存所有页面
  • 在不需要缓存的列表页面用activated生命周期替代created和mounted生命周期
  • 在点击新增按钮的时候在跳转的路由后面带时间戳，使路由改变触发页面实例销毁重置页面实例清空数据。
  • 在点击编辑和详情时也需要带时间戳因为编辑和详情每次进入的时候id都不一样。但是下一进入点相同的id时，如果不带时间戳将不会触发请求

使用方法

举例：订单列表页面初始化以前用的是created或mounted

activated() { 
    this.$nextTick(() => { 
      this.init();
    });
  },

举例：所有的跳转都需要加时间戳this.$time()是全局的一个获取时间戳的方法

clickAdd() { 
  this.$router.push({ 
    path: "order2",
    query: {  state: "add", time: this.$time() }
  });
  }
    原文作者：九段刀客
    原文地址: https://blog.csdn.net/weixin_35958891/article/details/102685382
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞