Vue多标签页应用解决方案

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue多标签页应用解决方案相关的知识,希望对你有一定的参考价值。

参考技术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,声明组件名称

以上是关于Vue多标签页应用解决方案的主要内容,如果未能解决你的问题,请参考以下文章

vuex里的值打开新标签页能拿到吗

vue单页应用前进刷新后退不刷新方案探讨

单页应用的数据流方案多思路探索

vue实现跳转浏览器新的标签页

vue 返回上一页,页面样式错乱

2020-07-06 VUE 单页面应用 修改页面title