修改vue的keep-alive实现仿easyui-页面tab切换

后台管理页面通常会有tabs切换作为导航

常见实现方式

1. 通过显示和隐藏div（缺点：无法看到路由）
2. 通过iframe，其实和显示隐藏区别不大

vue实现方式

因为要在vue中实现，用vue-router和vue中一个keep-alive，但是keep-alive有个缺点，他是用对象来缓存组件，并且是一个抽象组件，所以就稍微修改下。

效果图

功能

1. 点击左侧显示toolbar nav
2. 通过toolbar 切换路由，并保持之前缓存
3. 关闭toolbar清除缓存，打开后仍可用缓存

项目源代码

https://github.com/slipkinem/vue-admin

实现方式

监听路由的变动，当路由改变时将当前路由添加到一个列表里面。循环此列表生成toolbar的tabs，给keep-alive添加两个方法。第一个是当keep-alive工作的时候，设置存储key的hook、第二个方法添加通过key删除缓存removeCacheByKey。
当点击关闭按钮的时候，调用removeCacheByKey就可以完美解决vue keep-alive无法主动清除缓存的问题了。主要的keep-alive代码：

import _ from 'lodash'

function isDef (val) {
   
  return val !== undefined && val !== nul