在以往管理系统开发,相对比较大型的后台都会做成tab选卡式、即左边手风琴列表导航菜单,右边一个tab选卡容器。点击左边的菜单在右边打开一个选卡,选卡中内容是独立的,选卡可以任意切换和关闭。
在组件化开发之前的普遍做法是为tab内嵌入iframe,但现在既然用上vue组件开发我们就不能走老路了。我们使用elementui的tabs组件和menuNav来实现这个效果,我们希望点击menuNav中的item,之后在tabs中会新开一个选卡,选卡中内嵌一个对应的组件,为了减少首屏加载我们希望这个组件异步加载,预览地址:http://othcosaz6.bkt.clouddn.com,效果如下
以上就是要实现的效果,下面是具体步骤,具体可以直接到仓库查看,觉得对你有帮助的话记得赏颗star哦(^_-) https://github.com/huanent/vue-admin