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

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

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

用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);
      }
    }
  }
}