携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情

概念

keep-alive是Vue.js的一个内置组件。它能够把不活动的组件实例保存在内存中，而不是直接将其销毁，它是一个抽象组件，不会被渲染到真实DOM中，也不会出现在父组件链中。当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

用法

<keep-alive>
    <component></component>
</keep-alive>

step1

a、路由配置增加 name（必须唯一，建议大驼峰命名法）

b、meta增加name（页面刷新会默认显示）

如图

step2

a、所有页面增加name，必须和 router中的name一直

如图

step3

a、路由视图配置如下

b、openTabs 打开的页面数据如下（使用状态管理存openTabs ，打开或者删除去修改openTabs 数据即可）

c、页面刷新或者初始进入初始化openTabs（在keep-alive的组件中执行）

 

other

a、openTabs 状态管理参考

 

 

b、打开页面设置openTabs（关闭页面参考）

 

c、打开的tabs标签页关闭，设置openTabs（打开页面参考）

 

d、当前缓存的页面虚拟dom （在keep-alive组件的页面）

 

备注

1、页面跳转也可以使用name跳转，path不是必须的，根据具体项目调整

2、可以根据route对象的metched中的组件name来缓存