Vue keep-alive的使用

是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 相似，是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

结合router，缓存部分页面

使用$route.meta的keepAlive属性：

需要在router中设置router的元信息meta：

path:'/approval',
name:'Approval',
component: (resolve) => require(["@/page/adminPage/approval"], resolve),
redirect: '/basicSettings', //指定默认路由（重定向）
children:[
           {
              path:'/basicSettings',//基础表单
              meta: {keepAlive: true},
              name:'BasicSettings',
              component: (resolve) =>require(["@/components/approval/basicSettings"], resolve)
           }, 
           {
              path:'/formDesign',//表单设计
              meta: {keepAlive: true},
              name:'FormDesign',
              component: (resolve) =>require(["@/components/approval/formDesign"], resolve)
           }, 
           {
              path:'/processDesign',//流程设计
              meta: {keepAlive: true},
              name:'ProcessDesign',
              component: (resolve) =>require(["@/components/approval/ProcessDesign"], resolve)
           },                                   
]

看效果：

感谢 会搬砖的程序猿 的总结分享，传送门：https://www.cnblogs.com/ljx20180807/p/9810480.html