[Vue.js] keep-alive 实现标签页组件缓存

最新推荐文章于 2024-01-20 10:00:00 发布

原创最新推荐文章于 2024-01-20 10:00:00 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

3 篇文章

订阅专栏

vue

2 篇文章

订阅专栏

本文介绍如何在管理系统中实现类似浏览器的标签页效果，包括使用keep-alive缓存组件状态，通过include保存活跃标签页组件的name属性，以及新增和删除标签页的方法。

在做管理系统的时候，有时候需要实现类似浏览器标签页效果：

打开新页面时插入新的标签页
切换标签页时缓存组件状态
关闭标签页时删除该组件的缓存，保证下一次打开时为初始状态。

用keep-alive来缓存组件状态，使用include保存活跃状态标签页组件的name属性

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

export default {
  data() {
    return {
      pages: []
    }
  },
  methods: {
    //新增标签页
    addPage(name) {
      if(!this.pages.includes(name)) this.pages.push(name);
    },
    //删除标签页
    removePage(name) {
      var index = this.indexOf(val);
      if (index > -1) {
        this.splice(index, 1);
      }
    }
  }
}