Vue多标签页应用解决方案

Posted 2023-03-10

参考技术A

应用系统中需要运用到多标签页，跟浏览器一样的效果，在新打开页面后，动态追加一个页签，点击页签可以切换系统主页面区域的内容，且保持内容不刷新，如果关闭页签再通过菜单打开，重新加载。jQuery年代的解决方案就是ifream,但是在Vue.js的单页面应用中，都是组件化开发了，实现多标签页解决的问题就聚焦在关于组件实例的缓存和销毁，下边讲述两种实现多标签页系统的技术实现方案。

Vue Router是官方的路由管理器，跟Vue.js深度集成，确实很强，更多的功能不意义阐述，详情请参考 Vue Router 官方文档

当我们跳转一个新的路由时，可能是点击菜单，也可能是点击发生跳转，这时候路由会发生切换，我们都希望打开一个新的页签，并且这个页签并处于激活状态，当打开多个时，可以切换页签的激活状态，同时路由组件区域（页面内容）发生变化，始终展示激活页签对应的内容。

一个组件展示所有的标签页，并标识出来哪个是激活状态，标签页数据需要在菜单等地方实现追加，我们优先选择数据存在Vuex中，由标签页组件实现切换激活标签和删除标签，添加标签页也可以在该组件内实现，需要对路由进行监听，路由发生调用Vuex中的增加函数，函数对路由数据进行过滤，这样就可以实现路由变化时，标签页数据的变化。

在<router-view/> 外层包裹 <keep-alive>具体原理参考 在动态组件上使用 keep-alive

这个时候，在你切换渲染不同路由的时候，确实好使，组件的状态数据、表单填写的内容等也会被缓存，好像这么简单都直接解决了，当然不可能，这么简单就没必要写这篇文章。

当你更改路由参数的时候，你会发现参数变化的时候，不太好使了，会把之前缓存的这个组件销毁重新加载， 一个组件只能被缓存一个 ，我们希望的肯定是参数不一样时，应该分开都缓存，比如一些明细页面，我们需要看多个客户、多个工单，不应该每次切换都是在重新加载。

关闭页签时，我们更换路由，实现跳转，当再次访问这个路由时，组件未重新加载，这个就不符合正常的使用习惯，关闭页签就应该啥都没了，所以缓存啥的应该都没了。

组件有没有缓存可以通过DevTools调试查看

这样看起来，好像才是真的解决了所有的问题，但是还是有bug，有瑕疵， 解决方案2 中提到的一大堆过程的前提是 destroy ,只有组件进入 destroy 才满足 解决方案2 的方法，但是如果页签没有激活，keep-alive中就已经是停用了这个组件，关闭页签时，路由是没有变化的，keep-alive对各个组件也并没有发生启用和停用，只是改变了Vuex中 visitedViews 的数据，所以关键问题是只要 visitedViews 发生变化，需要把减少的那个组件给卸载掉。

至此，卸载这个活儿终于完成了，无论是怎么关闭页签，都可以完成组件的卸载，切换页签不卸载。感觉完美无瑕，可现实总是那么残酷，关闭页签后，再打开，切换页签时，这个组件 居然刷新了 ，明明关闭前，切换是不刷新的，关闭再打开后，就会刷新了，难道不会缓存了？看一下DevTools调试，懵了。。。

<keep-alive> 添加 include ，Vuex获取当前打开页签的组件名（如：visitedName），include=visitedName；针对传参数的页面，添加 watch ，监听Vuex中标签页的变化，当有变化时判断是否包含当前组件，没有时卸载当前组件，当组件不需要传参时可以不添加watch，include不缓存时组件将会被卸载。

注意： 页面组件必须写name，声明组件名称