VUE +ElementUI，tabs组件小坑

最近使用VUE + ElementUI 中的 el-tabs组件来完成一个后台管理系统的框架模板时，发现单页面的vue组件，在放进el-tabs组件中进行切换时，同一个vue页面的created方法被构建了多次，一般情况下看不出来任何问题。

然而，我们通常会在页面加载完毕时，在created钩子或mounted钩子中，对数据进行首次查询，来达到进入页面后能直接看到数据的效果。

但是，在el-tabs组件切换时，由于页面被重复构建了多次，会导致在created钩子或mounted钩子中的请求也被重复执行多次，这显然会加重服务器的负担，且会导致数据响应缓慢的情况，是我们不希望看到的结果。

具体现象如下图，图中采用了tabs组件嵌套的方式来构建导航的显示。 如下图，点击角色管理页面进入时，希望能够首次加载数据。在谷歌浏览器开发人员控制台中，可以很清楚的看到，同一请求被发送了四次，其中OPTIONS请求是跨域的预检，那么实际上是同时发送了两次请求，这是比较令人诧异的。 实际上，在嵌套使用el-tabs组件时，这个页面被构建的次数取决于父子tabs中一共出现了多少个tab标签，比如父tab中有3个标签页，子tab中有2个标签页，那么随机打开子tab中的这个两个标签页之一时，就会被重复构建 2 * 3 = 6次。

个人猜测，是因为tabs组件生成的tab-panel面板只是进行了隐藏，虽然不是同一个页面，但会对单页面的构建的钩子产生影响。

实验效果可以参考一下其他博客的内容，和我这个遇到的现象是差不多的：https://www.cnblogs.com/wangweizhang/p/10251758.html

实现效果方面，目的很明确，我们要保证进入页面时，只加载一次页面，这样就能够只进行一次数据查询的请求。

个人在做这个实现时，对tabs组件进行了妥协，因为实在没有办法在两个tabs组件嵌套的情况下，同时实现下面两个效果： ① 单页面只被构建一次，保证在created钩子或mounted钩子中的请求不会重复执行； ② 子tab页中的页面，需要用keep-alive对router-view的内容进行缓存。

个人通过实验，在外层的tabs的tab-panel上使用v-if来控制其他隐藏div的显示，即不只是隐藏，而是直接销毁。这样做可以保证效果①实现，但效果②没办法完成，因为内部组件是重新构建的，相当于一切都变了，页面缓存也是没办法进行的。

最终我干掉了最外层的tabs组件，采用了下拉框的方式，加载一级菜单，效果如下图，最终可以实现页面加载一次和页面缓存的效果。 采用上图方式加载菜单级别，而并没有直接使用左侧菜单栏来加载三级菜单的原因在于，如果菜单很多，直接寻找三级菜单会比较繁琐，当然你不介意的话，这样做本身是没有任何问题的。

一开始，我是在keep-alive标签外，加上整个v-if的判断，来阻止非当前页的显示，比如下面代码。但是发现，这样只能实现页面单次加载，v-if重构组件后，其他组件也就不复存在了，这个很好理解，但这样会导致整个缓存路由也都会重新构建，也就是说无法实现页面缓存的效果。

后来改进了之后，将v-if加在了router-view上，就能够保证同时实现两种效果了。

如果有从VUE+ElementUI 实现左侧菜单栏+Tab页访问本地页面和远程页面，非iFrame方式这篇博客来的小伙伴，则希望在看了本文后，能够解决你的烦恼。