在做管理系统的时候,有时候需要实现类似浏览器标签页效果:
- 打开新页面时插入新的标签页
- 切换标签页时缓存组件状态
- 关闭标签页时删除该组件的缓存,保证下一次打开时为初始状态。
用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);
}
}
}
}