一种单页面应用切换显示多视图方法及单页面应用技术

本发明专利技术公开供一种单页面应用切换显示多视图方法及单页面应用，所述方法包括：接收用户访问请求，确认目标路由信息并加载所述目标路由对应的视图组件，以所述目标路由的路径建立组件实例缓存；更新所述目标路由信息中的展示模式标识，通过所述页签组件对所述组件实例缓存实例化渲染后展示至页签界面；当用户访问多视图内容时，更新所述目标路由信息中的展示模式标识，解除所述目标路由与对应视图组件的绑定关系，通过所述弹窗组件对所述组件实例缓存实例化渲染后展示至弹窗页面。本发明专利技术采用视图组件实例缓存作中介，结合页签组件和弹窗组件两种显示模式，实现在同一个路由中切换到弹窗模式以满足同时显示多视图组件内容的需求。窗模式以满足同时显示多视图组件内容的需求。窗模式以满足同时显示多视图组件内容的需求。

【技术实现步骤摘要】
一种单页面应用切换显示多视图方法及单页面应用


[0001]本专利技术涉及路由过程优化
，尤其涉及一种单页面应用切换显示多视图方法及单页面应用。

技术介绍

[0002]在中后台管理类系统中，多页签的需求非常普遍，用户常常需要在多个页签内跳转，或需要同时打开多页签或弹窗对比各个页面内容。在采用了路由模式的单页面应用中，一个路由只能加载一个指定的页面视图组件，当路由切换后视图组件也要跟着一起更换，因此不能同时展示多个视图组件。
[0003]目前可以通过非路由模式加载页面视图组件，或用iframe的方式嵌套页面的方式实现多个页签或弹窗同时展示，但由于这种方案加载资源较多，电脑配置低会卡顿，非路由模式不能通过ur l直接访问到具体页面，不能满足某些业务要求。每次关闭再打开标签都是一次浏览器窗口资源重建的过程，有明显白屏；由于页面之间割裂，页签和弹窗之间的状态不能保持一致；由于无路由，无法通过网页URL直接访问指定页签页面，浏览器历史记录也会失效。

技术实现思路

[0004]本专利技术实施例提供一种单页面应用切换显示多视图方法本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种单页面应用切换显示多视图方法，其特征在于，包括：根据路由表配置，一一绑定各个路由和各个视图组件；接收用户访问请求，确认目标路由信息并加载所述目标路由对应的视图组件，以所述目标路由的路径建立组件实例缓存；更新所述目标路由信息中的展示模式标识，将所述组件实例缓存的参数传递至页签组件，通过所述页签组件对所述组件实例缓存实例化渲染后展示至页签界面；当用户访问多视图内容时，销毁当前页签组件，更新所述目标路由信息中的展示模式标识，解除所述目标路由与对应视图组件的绑定关系；将所述组件实例缓存的参数传递至弹窗组件，通过所述弹窗组件对所述组件实例缓存实例化渲染后展示至弹窗页面。2.如权利要求1所述单页面应用切换显示多视图方法，其特征在于，在所述将所述组件实例缓存的参数传递至弹窗组件，通过所述弹窗组件对所述组件实例缓存实例化渲染后展示至弹窗页面之后，还包括：接收用户的切换指令，销毁当前弹窗组件，更新所述目标路由信息中的展示模式标识，恢复所述目标路由与对应视图组件的绑定关系；将所述组件实例缓存的参数传递至所述页签组件，通过所述页签组件对所述组件实例缓存实例化渲染后展示至页签界面。3.如权利要求1所述单页面应用切换显示多视图方法，其特征在于，所述更新所述目标路由信息中的展示模式标识，解除所述目标路由与对应视图组件的绑定关系，具体包括:将所述目标路由信息中的展示模式标识转换为弹窗标识，当当前路由需要改变时，由所述弹窗标识确认当前路由已经存在对应的弹窗组件，阻止当前路由的改变。4.如权利要求2所述单页面应用切换显示多视图方法，其特征在于，所述更新所述目标路由信息中的展示模式标识，恢复所述目标路由与对应视图组件的绑定关系，具体包括:将所述目标路由信息中的展示模式标识转换为页签标识，当当前路由需要改变时，由所述页签标识确认当前路由不存在弹窗组件，改变当前路由。5.如权利要求1所述单页面应用切换...

【专利技术属性】
技术研发人员：叶艺源，陈华春，
申请(专利权)人：广东萨米特陶瓷有限公司佛山市三水新明珠建陶工业有限公司江西新明珠建材有限公司湖北新明珠绿色建材科技有限公司，
类型：发明
国别省市：