后台管理页面通常会有tabs切换作为导航
常见实现方式
- 通过显示和隐藏div(缺点:无法看到路由)
- 通过iframe,其实和显示隐藏区别不大
vue实现方式
因为要在vue中实现,用vue-router和vue中一个keep-alive,但是keep-alive有个缺点,他是用对象来缓存组件,并且是一个抽象组件,所以就稍微修改下。
效果图
功能
- 点击左侧显示toolbar nav
- 通过toolbar 切换路由,并保持之前缓存
- 关闭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