CN113918263B - 视图组件的虚拟路由方法、装置、设备及计算机存储介质 - Google Patents

Abstract

本申请实施例提供了一种视图组件的虚拟路由方法、装置、设备及计算机存储介质。其中，所述方法包括：接收用于触发所述视图组件在Vue框架中的缓存抽象组件中缓存的操作，并根据操作，动态创建视图组件的第一具名组件；动态生成视图组件的第一具名组件的虚拟路由信息；调用虚拟路由添加方法，以将第一具名组件的虚拟路由信息添加到路由管理器的路由表中；调用虚拟路由跳转方法，以根据生成的跳转路由信息，确定路由表中与跳转路由信息匹配的路由信息所对应的第二具名组件；对第二具名组件进行渲染，并将第二具名组件的渲染数据呈现于路由管理器的视图标签所指示的显示区域。本方案能解决现有技术中存在的多路由对应同一视图组件的组件复用问题。

Description

视图组件的虚拟路由方法、装置、设备及计算机存储介质

技术领域

本申请实施例涉及互联网技术领域，尤其涉及一种视图组件的虚拟路由方法、装置、电子设备及计算机存储介质。

背景技术

目前，前端框架势起，Vue以国人开发、中文文档维护、学习曲线平滑等优点，快速成为备受国人喜爱的框架之一，Vue Router作为官网路由管理器也成为Vue生态圈中最为重要的一环。Vue的特色之一是组件式开发，允许将项目分成多个单页面组件，将业务进行模块化拆分，然后按照合理的方式组织起来，这样做大大提高了视图组件的复用性，进而提高了开发效率。组件开发模式下，会伴随有组件切换的问题。Vue官方提出了动态组件的概念，能够帮助用户更优雅的实现组件切换。但是，组件的切换会伴随着组件的挂载和卸载，随着频次的提高，对于性能上的开销也不容小觑。

为此，Vue官网提供了用于组件或者路由缓存的keep-alive抽象组件。使用keep-alive抽象组件包裹动态组件或路由视口，能够缓存失活的组件实例，而不是销毁实例，它本身是一个抽象组件，不会被渲染成为一个真正的DOM元素，也不会出现在组件的父组件链中，不会产生DOM树嵌套过深的问题。官方的keep-alive组件成为了设计缓存策略的突破口，但是keep-alive组件的使用具有以下两个限制条件：第一个限制条件是keep-alive缓存依赖视图组件的name属性，首先匹配组件自身的name选项，如果name选项不可用，则匹配它的局部注册名称(父组件的components选项的键值)，匿名组件是不能被匹配的；第二个限制条件是keep-alive仅作用在其直属子组件被开关时的场景。

为了更加友好地展示用户打开过的标签，项目设计了标签栏，可以缓存每个标签页的数据，在不同标签页切换的过程中，数据不会消失，只有用户关闭标签页或者手动刷新浏览器页面的时候数据才会消失。但是，项目中存在多个路由渲染同一个视图组件的情况，也就是多个标签页展示的是同一个视图组件。由于视图组件的name属性相同，所以多个标签页的数据缓存相互耦合互相影响，失去了不同标签页的独立性。考虑到项目的动态性和可扩展性，不能为每一个同名视图组件的标签页都创建一个新的具名组件，因为组件的引用次数是不确定的，项目初始化之前就预制好对应数目的互异具名组件也是不现实的，况且就算可以预制，也让项目失去了可扩展性。

由此可见，如何解决现有技术中存在的多路由对应同一视图组件的组件复用问题成为当前亟待解决的技术问题。

发明内容

有鉴于此，本发明实施例所解决的技术问题之一在于提供一种视图组件的虚拟路由方法、装置、电子设备及计算机存储介质，用以解决现有技术中存在的多路由对应同一视图组件的组件复用问题。

根据本发明实施例的第一方面，提供了一种视图组件的虚拟路由方法，所述方法包括：接收用于触发所述视图组件在所述Vue框架中的缓存抽象组件中缓存的操作，并根据所述操作，动态创建所述视图组件的第一具名组件；根据所述视图组件的第一具名组件，动态生成所述视图组件的第一具名组件的虚拟路由信息；调用虚拟路由添加方法，以将所述视图组件的第一具名组件的虚拟路由信息添加到所述路由管理器的路由表中；调用虚拟路由跳转方法，以根据生成的跳转路由信息，确定所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的第二具名组件；对所述第二具名组件进行渲染，以获得所述第二具名组件的渲染数据，并将所述第二具名组件的渲染数据呈现于所述路由管理器的视图标签所指示的显示区域。

根据本发明实施例的第二方面，提供了一种视图组件的虚拟路由装置，所述装置包括：动态创建模块，用于接收用于触发所述视图组件在所述Vue框架中的缓存抽象组件中缓存的操作，并根据所述操作，动态创建所述视图组件的第一具名组件；动态生成模块，用于根据所述视图组件的第一具名组件，动态生成所述视图组件的第一具名组件的虚拟路由信息；第一调用模块，用于调用虚拟路由添加方法，以将所述视图组件的第一具名组件的虚拟路由信息添加到所述路由管理器的路由表中；第二调用模块，用于调用虚拟路由跳转方法，以根据生成的跳转路由信息，确定所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的第二具名组件；渲染模块，用于对所述第二具名组件进行渲染，以获得所述第二具名组件的渲染数据，并将所述第二具名组件的渲染数据呈现于所述路由管理器的视图标签所指示的显示区域。

根据本发明实施例的第三方面，提供了一种电子设备，包括：处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行如第一方面所述的视图组件的虚拟路由方法对应的操作。

根据本发明实施例的第四方面，提供了一种计算机存储介质，其上存储有计算机程序，该程序被处理器执行时实现如第一方面所述的视图组件的虚拟路由方法。

本发明实施例提供的视图组件的虚拟路由方案应用于终端设备，并配合所述Vue框架中的缓存抽象组件的缓存策略，能够大大减少了服务端接口的调用次数，减轻服务端压力，提高了服务端的稳定性。此外，接收用于触发所述视图组件在所述Vue框架中的缓存抽象组件中缓存的操作，并根据所述操作，动态创建所述视图组件的第一具名组件；根据所述视图组件的第一具名组件，动态生成所述视图组件的第一具名组件的虚拟路由信息；调用虚拟路由添加方法，以将所述视图组件的第一具名组件的虚拟路由信息添加到所述路由管理器的路由表中；调用虚拟路由跳转方法，以根据生成的跳转路由信息，确定所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的第二具名组件；对所述第二具名组件进行渲染，以获得所述第二具名组件的渲染数据，并将所述第二具名组件的渲染数据呈现于所述路由管理器的视图标签所指示的显示区域，能够有效地解决现有技术中存在的多路由对应同一视图组件的组件复用问题，而且充分考虑到了项目的复用性、扩展性和易用性，且对开发者非常友好，开发者完全可以采用API式编程来应用方案，灵活度和自由度都有大幅提高。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明实施例中记载的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图。

图1A为本申请实施例一中视图组件的虚拟路由方法的步骤流程图；

图1B为根据本申请实施例一提供的视图组件的虚拟路由方法的示意图；

图2为本申请实施例二中视图组件的虚拟路由装置的结构示意图；

图3为本申请实施例三中电子设备的结构示意图。

具体实施方式

为了使本领域的人员更好地理解本发明实施例中的技术方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本发明实施例一部分实施例，而不是全部的实施例。基于本发明实施例中的实施例，本领域普通技术人员所获得的所有其他实施例，都应当属于本发明实施例保护的范围。

下面结合本发明实施例附图进一步说明本发明实施例具体实现。

传统的基于Vue Router(路由管理器)的路由配置方案是在项目初始化的时候，将视图组件与路由的对应关系添加到路由词典中，也就是说在这种方案中路由信息是预先配置的，视图组件的name属性也是在项目初始化的时候就配置好的，因为视图组件的name属性在项目运行之后动态修改是无法生效的，对于多路由对应同一视图组件的组件复用问题，传统的基于Vue Router的路由配置方案显得力不从心。基于此，本实施例提供一种基于Vue Router的虚拟路由方法，以有效解决现有技术中存在的多路由对应同一视图组件的组件复用问题。下面详细描述本实施例提供的基于Vue Router的虚拟路由方法。

参照图1A，示出了本申请实施例一中视图组件的虚拟路由方法的步骤流程图。

本实施例从终端设备的角度，对本发明实施例提供的视图组件的虚拟路由方法进行说明。具体地，本实施例提供的视图组件的虚拟路由方法包括以下步骤：

在步骤S101中，接收用于触发所述视图组件在所述Vue框架中的缓存抽象组件中缓存的操作，并根据所述操作，动态创建所述视图组件的第一具名组件。

在本实施例中，所述Vue框架可理解为一种用于构建用户界面的渐进式框架。所述Vue框架的路由管理器可理解为管理视图组件的路由信息的管理器，所述路由管理器可为Vue Router。所述缓存抽象组件可为keep-alive抽象组件。所述操作可为针对标签栏中的标签页的切换操作或者针对标签栏中的标签页的点击跳转操作等。可以理解的是，以上描述仅为示例性的，本实施例对此不做任何限定。

在一些可选实施例中，在根据所述操作，动态创建所述视图组件的第一具名组件时，通过基于Vue框架的路由管理器，根据所述操作，确定缓存于所述缓存抽象组件中的所述视图组件的模板；通过所述路由管理器，根据所述视图组件的模板，动态创建所述视图组件的第一具名组件，并对所述视图组件的第一具名组件的属性进行配置。籍此，通过所述操作，能够准确地确定缓存于所述缓存抽象组件中的所述视图组件的模板。此外，通过所述路由管理器，根据所述视图组件的模板，能够动态创建所述视图组件的第一具名组件。可以理解的是，以上描述仅为示例性的，本实施例对此不做任何限定。

在一个具体的例子中，在通过基于Vue框架的路由管理器，根据所述操作，确定缓存于所述缓存抽象组件中的所述视图组件的模板时，通过所述路由管理器，根据所述操作，确定缓存于所述缓存抽象组件中的所述视图组件，并根据所述视图组件，生成所述视图组件的模板。在根据所述视图组件，生成所述视图组件的模板时，通过所述路由管理器，调用组件模板生成方法，以根据所述视图组件，生成所述视图组件的模板。其中，所述视图组件的模板可理解为用于表征所述视图组件的功能的组件样板。可以理解的是，以上描述仅为示例性的，本实施例对此不做任何限定。

在一个具体的例子中，所述视图组件的第一具名组件可理解为功能与所述视图组件的功能相同但组件的name属性与所述视图组件的name属性不相同的视图组件，所述视图组件的第一具名组件的属性可为异步组件等。可以理解的是，以上描述仅为示例性的，本实施例对此不做任何限定。

在步骤S102中，根据所述视图组件的第一具名组件，动态生成所述视图组件的第一具名组件的虚拟路由信息。

在本实施例中，所述虚拟路由信息，即在项目初始化时不将虚拟路由信息进行预先配置，而是在项目中通过一定操作进行触发(例如点击跳转操作)动态将虚拟路由信息添加到路由表中，模拟真实路由词典，因其不真实存在于路由词典中，故称为“虚拟路由信息”。引入虚拟路由信息的最大意义在于保证了视图组件的name属性的唯一性，同一视图组件强制不复用。可以理解的是，以上描述仅为示例性的，本实施例对此不做任何限定。

在一些可选实施例中，在根据所述视图组件的第一具名组件，动态生成所述视图组件的第一具名组件的虚拟路由信息时，通过基于Vue框架的路由管理器，调用虚拟路由配置策略对象，以根据所述视图组件的第一具名组件，动态配置所述视图组件的第一具名组件的虚拟路由信息。籍此，虚拟路由信息采用策略进行配置，减小了代码执行的时间复杂度，提高了代码执行效率。可以理解的是，以上描述仅为示例性的，本实施例对此不做任何限定。

在一个具体的例子中，为了方便项目扩展，基于JavaScript的策略模式设计了一套虚拟路由配置方案，键即为所述视图组件的模板，开发者如果需要进行扩展，无需进行代码逻辑的更改，直接进行所述视图组件的模板配置即可。可以理解的是，以上描述仅为示例性的，本实施例对此不做任何限定。

在一些可选实施例中，所述方法还包括：通过所述路由管理器，检测所述视图组件的第一具名组件的虚拟路由信息是否存在；若不存在，则执行所述通过所述路由管理器，调用虚拟路由添加方法，以将所述视图组件的第一具名组件的虚拟路由信息添加到所述路由管理器的路由表中的步骤；若存在，则重新配置所述视图组件的第一具名组件的虚拟路由信息。籍此，能够有效避免所述视图组件的第一具名组件的虚拟路由信息的重复添加。可以理解的是，以上描述仅为示例性的，本实施例对此不做任何限定。

在步骤S103中，调用虚拟路由添加方法，以将所述视图组件的第一具名组件的虚拟路由信息添加到所述路由管理器的路由表中。

在本实施例中，所述虚拟路由添加方法可理解为具有虚拟路由添加功能的方法，可以采用JavaScript语言、JavaScript扩展语言等实现所述虚拟路由添加方法。可以理解的是，以上描述仅为示例性的，本实施例对此不做任何限定。

在步骤S104中，调用虚拟路由跳转方法，以根据生成的跳转路由信息，确定所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的第二具名组件。

在本实施例中，所述虚拟路由跳转方法可理解为具有虚拟路由跳转功能的方法，可以采用JavaScript语言、JavaScript扩展语言等实现所述虚拟路由跳转方法。可以理解的是，以上描述仅为示例性的，本实施例对此不做任何限定。

在一些可选实施例中，在调用虚拟路由跳转方法，以根据生成的跳转路由信息，确定所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的第二具名组件时，通过基于Vue框架的路由管理器，调用所述虚拟路由跳转方法，以传入跳转的目标路径和所述视图组件的模板，并根据所述跳转的目标路径和所述视图组件的模板，生成所述跳转路由信息，再确定所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的所述第二具名组件。籍此，能够准确地确定所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的第二具名组件，进而渲染出页面的内容数据。可以理解的是，以上描述仅为示例性的，本实施例对此不做任何限定。

在一个具体的例子中，在确定所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的所述第二具名组件时，确定所述路由表中与所述跳转路由信息相同的路由信息所对应的所述第二具名组件。这样，能够获得所述视图组件的具名组件，进而渲染出页面的内容数据。可以理解的是，以上描述仅为示例性的，本实施例对此不做任何限定。

在一个具体的例子中，为了方便开发者应用虚拟路由信息，并没有将创建虚拟路由的方法直接暴露给开发者，对于开发者而言，并不应该关注如何创建虚拟路由，创建虚拟路由的目的是为了给虚拟路由跳转提供配置支持，故此，基于Vue Router的push方法封装了一个适用于虚拟路由的路由跳转方法，并直接暴露给开发者，开发者直接调用就可以实现虚拟路由跳转，对于开发者的表象就如同调用了一个基于Vue Router的push方法。路由跳转方法的封装大大减小了开发者对于虚拟路由技术方案实施的难度，开箱即用，快捷方便。当所述操作为针对标签栏中的标签页的切换操作时，虚拟路由信息的匹配和视图组件的缓存，用户可以平滑地在标签页中切换，缩短了用户的等待时间，给与用户更友好的体验。可以理解的是，以上描述仅为示例性的，本实施例对此不做任何限定。

在步骤S105中，对所述第二具名组件进行渲染，以获得所述第二具名组件的渲染数据，并将所述第二具名组件的渲染数据呈现于所述路由管理器的视图标签所指示的显示区域。

在本实施例中，所述路由管理器可包括路由链接标签和路由视图标签。所述路由链接标签定义页面中点击的部分，所述路由视图标签定义显示部分，就是点击后，匹配的内容显示在什么地方。可以理解的是，以上描述仅为示例性的，本实施例对此不做任何限定。

在一些可选实施例中，所述将所述视图组件的第一具名组件的虚拟路由信息添加到所述路由管理器的路由表中之后，所述方法还包括：通过基于Vue框架的路由管理器，调用虚拟路由存储方法，以将添加到所述路由表中的虚拟路由信息持久化存储至所述终端设备的存储装置中。籍此，通过所述路由管理器，调用虚拟路由存储方法，能够有效地将添加到所述路由表中的虚拟路由信息持久化存储至所述终端设备的存储装置中，以备所述虚拟路由信息的后续使用。可以理解的是，以上描述仅为示例性的，本实施例对此不做任何限定。

在一个具体的例子中，所述虚拟路由存储方法可理解为具有虚拟路由存储功能的方法，可以采用JavaScript语言、JavaScript扩展语言等实现所述虚拟路由存储方法。可以理解的是，以上描述仅为示例性的，本实施例对此不做任何限定。

在一些可选实施例中，所述将添加到所述路由表中的虚拟路由信息持久化存储至所述终端设备的存储装置中之后，所述方法还包括：当检测到所述终端设备的页面被手动刷新时，通过所述路由管理器，调用钩子函数，以将所述存储装置中持久化存储的虚拟路由信息逐一添加到所述路由表中，并通过所述路由管理器，自动创建所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的第二具名组件。籍此，能够有效避免所述终端设备的页面刷新空白的问题。可以理解的是，以上描述仅为示例性的，本实施例对此不做任何限定。

在一个具体的例子中，虚拟路由信息在项目初始化时不会预先配置进入路由管理器的路由表，动态创建的虚拟路由信息仅存在于内存当中，因此，手动刷新页面的时候，匹配不到路由连接，会展示空白页面。为了解决这个技术问题，需要借助Vue Router的beforeEach钩子函数，重新将持久化存储的虚拟路由信息逐一添加进入路由管理器的路由表中。可以理解的是，以上描述仅为示例性的，本实施例对此不做任何限定。

在一个具体的例子中，如图1B所示，本实施例提供的视图组件的虚拟路由方法的实现过程如下：使用keep-alive抽象组件缓存视图组件，某种操作触发视图组件的缓存，动态创建视图组件的具名组件，并动态生成视图组件的具名组件的唯一虚拟路由信息，再将动态生成的视图组件的具名组件的唯一虚拟路由信息添加至路由表，然后根据路由跳转信息，在路由表中进行组件匹配，获得视图组件的具名组件。若浏览器页面没有手动刷新，对具名组件进行渲染，获得具名组件的渲染数据，并将具名组件的渲染数据呈现于所述路由管理器的视图标签所指示的显示区域。若浏览器页面手动刷新，缓存组件失活，虚拟路由信息丢失。在这之前，需要进行虚拟路由信息的持久化存储，并自动创建已匹配的具名组件，对具名组件进行渲染，将具名组件的渲染数据呈现于所述路由管理器的视图标签所指示的显示区域。可以理解的是，以上描述仅为示例性的，本实施例对此不做任何限定。

在实际应用中，本实施例提供的视图组件的虚拟路由方案的设计充分考虑到了项目的易用性和扩展性。开发者无需关注方案具体实现，仅仅两步就可以搞定技术实施：首先配置虚拟路由信息，其次调用go2Where方法跳转，简简单单两步帮助开发者搞定虚拟路由方案。可以理解的是，以上描述仅为示例性的，本实施例对此不做任何限定。

在具体实施时，为了帮助开发者更加熟悉并能更好应用本设计方案，对整体设计方案进行详细介绍：第一步，在项目路由配置文件夹(src/router)下新建dynamic.js文件，配置虚拟路由信息的视图组件模板和异步组件引入方式，使用ES6语法导出一个默认对象以供引用。项目中已经配置好了虚拟路由信息，若需要扩展则按照项目需求及规则添加即可。第二步，在项目工具函数文件夹(src/utils)下新建addNewRouter.js文件，配置虚拟路由实现方法、虚拟路由跳转方法等相关方法。第三步，在需要使用虚拟路由信息的组件中引入go2Where方法直接调用。go2Where方法中的path字段完全等同router的push方法中的path字段，为了保证系统中虚拟路由组件的name属性唯一，通常采用一个或两个甚至更多唯一标识来定义(标识通常来自后台服务)。此外，go2Where方法中的query对象配置的键值对会以查询字符串的方式出现在浏览器URL中，完全等同router的push方法的query字段，若传入type字段，则动态选择需要引入的异步组件，使用默认值则不用添加该字段。title为标签栏显示内容。在项目使用中，开发者仅仅需要进行一次配置(dynamic.js)一次调用(go2Where())就可以轻轻松松使用虚拟路由方案了。Vue中视图组件切换伴随性能开销，官方缓存策略在项目中存在不适用点，虚拟路由方案的出现完美解决项目痛点。

本实施例提供的视图组件的虚拟路由方法应用于终端设备，并配合所述Vue框架中的缓存抽象组件的缓存策略，能够大大减少了服务端接口的调用次数，减轻服务端压力，提高了服务端的稳定性。此外，接收用于触发所述视图组件在所述Vue框架中的缓存抽象组件中缓存的操作，并根据所述操作，动态创建所述视图组件的第一具名组件；根据所述视图组件的第一具名组件，动态生成所述视图组件的第一具名组件的虚拟路由信息；调用虚拟路由添加方法，以将所述视图组件的第一具名组件的虚拟路由信息添加到所述路由管理器的路由表中；调用虚拟路由跳转方法，以根据生成的跳转路由信息，确定所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的第二具名组件；对所述第二具名组件进行渲染，以获得所述第二具名组件的渲染数据，并将所述第二具名组件的渲染数据呈现于所述路由管理器的视图标签所指示的显示区域，能够有效地解决现有技术中存在的多路由对应同一视图组件的组件复用问题，而且充分考虑到了项目的复用性、扩展性和易用性，且对开发者非常友好，开发者完全可以采用API式编程来应用方案，灵活度和自由度都有大幅提高。

本实施例提供的视图组件的虚拟路由方法可以由任意适当的具有数据处理能力的设备执行，包括但不限于：摄像头、终端、移动终端、PC机、服务器、车载设备、娱乐设备、广告设备、个人数码助理(PDA)、平板电脑、笔记本电脑、掌上游戏机、智能眼镜、智能手表、可穿戴设备、虚拟显示设备或显示增强设备等。

参照图2，示出了本申请实施例二中视图组件的虚拟路由装置的结构示意图。

本实施例提供的视图组件的虚拟路由装置包括：动态创建模块201，用于接收用于触发所述视图组件在所述Vue框架中的缓存抽象组件中缓存的操作，并根据所述操作，动态创建所述视图组件的第一具名组件；动态生成模块202，用于根据所述视图组件的第一具名组件，动态生成所述视图组件的第一具名组件的虚拟路由信息；第一调用模块203，用于调用虚拟路由添加方法，以将所述视图组件的第一具名组件的虚拟路由信息添加到所述路由管理器的路由表中；第二调用模块204，用于调用虚拟路由跳转方法，以根据生成的跳转路由信息，确定所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的第二具名组件；渲染模块205，用于对所述第二具名组件进行渲染，以获得所述第二具名组件的渲染数据，并将所述第二具名组件的渲染数据呈现于所述路由管理器的视图标签所指示的显示区域。

可选地，所述动态创建模块201，具体用于：通过基于Vue框架的路由管理器，根据所述操作，确定缓存于所述缓存抽象组件中的所述视图组件的模板；通过所述路由管理器，根据所述视图组件的模板，动态创建所述视图组件的第一具名组件，并对所述视图组件的第一具名组件的属性进行配置。

可选地，所述动态生成模块202，包括：调用子模块，用于通过基于Vue框架的路由管理器，调用虚拟路由配置策略对象，以根据所述视图组件的第一具名组件，动态配置所述视图组件的第一具名组件的虚拟路由信息。

可选地，所述动态生成模块202还包括：检测子模块，用于通过所述路由管理器，检测所述视图组件的第一具名组件的虚拟路由信息是否存在；若不存在，则执行所述通过所述路由管理器，调用虚拟路由添加方法，以将所述视图组件的第一具名组件的虚拟路由信息添加到所述路由管理器的路由表中的步骤；若存在，则重新配置所述视图组件的第一具名组件的虚拟路由信息。

可选地，所述第二调用模块204，具体用于：通过基于Vue框架的路由管理器，调用所述虚拟路由跳转方法，以传入跳转的目标路径和所述视图组件的模板，并根据所述跳转的目标路径和所述视图组件的模板，生成所述跳转路由信息，再确定所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的所述第二具名组件。

可选地，所述第一调用模块203之后，所述装置还包括：存储模块，用于通过基于Vue框架的路由管理器，调用虚拟路由存储方法，以将添加到所述路由表中的虚拟路由信息持久化存储至所述终端设备的存储装置中。

可选地，所述存储模块之后，所述装置还包括：处理模块，用于当检测到所述终端设备的页面被手动刷新时，通过所述路由管理器，调用钩子函数，以将所述存储装置中持久化存储的虚拟路由信息逐一添加到所述路由表中，并通过所述路由管理器，自动创建所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的第二具名组件。

本实施例提供的视图组件的虚拟路由装置用于实现前述多个方法实施例中相应的视图组件的虚拟路由方法，并具有相应的方法实施例的有益效果，在此不再赘述。

参照图3，示出了根据本发明实施例三的一种电子设备的结构示意图，本发明具体实施例并不对电子设备的具体实现做限定。

如图3所示，该电子设备可以包括：处理器(processor)302、通信接口(Communications Interface)304、存储器(memory)306、以及通信总线308。

其中：

处理器302、通信接口304、以及存储器306通过通信总线308完成相互间的通信。

通信接口304，用于与其它电子设备或服务器进行通信。

处理器302，用于执行程序310，具体可以执行上述视图组件的虚拟路由方法实施例中的相关步骤。

具体地，程序310可以包括程序代码，该程序代码包括计算机操作指令。

处理器302可能是中央处理器CPU，或者是特定集成电路ASIC(ApplicationSpecific Integrated Circuit)，或者是被配置成实施本发明实施例的一个或多个集成电路。智能设备包括的一个或多个处理器，可以是同一类型的处理器，如一个或多个CPU；也可以是不同类型的处理器，如一个或多个CPU以及一个或多个ASIC。

存储器306，用于存放程序310。存储器306可能包含高速RAM存储器，也可能还包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。

程序310具体可以用于使得处理器302执行以下操作：接收用于触发所述视图组件在所述Vue框架中的缓存抽象组件中缓存的操作，并根据所述操作，动态创建所述视图组件的第一具名组件；根据所述视图组件的第一具名组件，动态生成所述视图组件的第一具名组件的虚拟路由信息；调用虚拟路由添加方法，以将所述视图组件的第一具名组件的虚拟路由信息添加到所述路由管理器的路由表中；调用虚拟路由跳转方法，以根据生成的跳转路由信息，确定所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的第二具名组件；对所述第二具名组件进行渲染，以获得所述第二具名组件的渲染数据，并将所述第二具名组件的渲染数据呈现于所述路由管理器的视图标签所指示的显示区域。

在一种可选的实施方式中，程序310还用于使得处理器302在根据所述操作，动态创建所述视图组件的第一具名组件时，通过基于Vue框架的路由管理器，根据所述操作，确定缓存于所述缓存抽象组件中的所述视图组件的模板；通过所述路由管理器，根据所述视图组件的模板，动态创建所述视图组件的第一具名组件，并对所述视图组件的第一具名组件的属性进行配置。

在一种可选的实施方式中，程序310还用于使得处理器302在根据所述视图组件的第一具名组件，动态生成所述视图组件的第一具名组件的虚拟路由信息时，通过基于Vue框架的路由管理器，调用虚拟路由配置策略对象，以根据所述视图组件的第一具名组件，动态配置所述视图组件的第一具名组件的虚拟路由信息。

在一种可选的实施方式中，程序310还用于使得处理器302通过所述路由管理器，检测所述视图组件的第一具名组件的虚拟路由信息是否存在；若不存在，则执行所述通过所述路由管理器，调用虚拟路由添加方法，以将所述视图组件的第一具名组件的虚拟路由信息添加到所述路由管理器的路由表中的步骤；若存在，则重新配置所述视图组件的第一具名组件的虚拟路由信息。

在一种可选的实施方式中，程序310还用于使得处理器302在调用虚拟路由跳转方法，以根据生成的跳转路由信息，确定所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的第二具名组件时，通过基于Vue框架的路由管理器，调用所述虚拟路由跳转方法，以传入跳转的目标路径和所述视图组件的模板，并根据所述跳转的目标路径和所述视图组件的模板，生成所述跳转路由信息，再确定所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的所述第二具名组件。

在一种可选的实施方式中，程序310还用于使得处理器302在将所述视图组件的第一具名组件的虚拟路由信息添加到所述路由管理器的路由表中之后，通过基于Vue框架的路由管理器，调用虚拟路由存储方法，以将添加到所述路由表中的虚拟路由信息持久化存储至所述终端设备的存储装置中。

在一种可选的实施方式中，程序310还用于使得处理器302在将添加到所述路由表中的虚拟路由信息持久化存储至所述终端设备的存储装置中之后，当检测到所述终端设备的页面被手动刷新时，通过所述路由管理器，调用钩子函数，以将所述存储装置中持久化存储的虚拟路由信息逐一添加到所述路由表中，并通过所述路由管理器，自动创建所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的第二具名组件。

程序310中各步骤的具体实现可以参见上述视图组件的虚拟路由方法实施例中的相应步骤和单元中对应的描述，在此不赘述。所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的设备和模块的具体工作过程，可以参考前述方法实施例中的对应过程描述，在此不再赘述。

通过本实施例的电子设备，本发明实施例提供的视图组件的虚拟路由方案应用于终端设备，并配合所述Vue框架中的缓存抽象组件的缓存策略，能够大大减少了服务端接口的调用次数，减轻服务端压力，提高了服务端的稳定性。此外，接收用于触发所述视图组件在所述Vue框架中的缓存抽象组件中缓存的操作，并根据所述操作，动态创建所述视图组件的第一具名组件；根据所述视图组件的第一具名组件，动态生成所述视图组件的第一具名组件的虚拟路由信息；调用虚拟路由添加方法，以将所述视图组件的第一具名组件的虚拟路由信息添加到所述路由管理器的路由表中；调用虚拟路由跳转方法，以根据生成的跳转路由信息，确定所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的第二具名组件；对所述第二具名组件进行渲染，以获得所述第二具名组件的渲染数据，并将所述第二具名组件的渲染数据呈现于所述路由管理器的视图标签所指示的显示区域，能够有效地解决现有技术中存在的多路由对应同一视图组件的组件复用问题，而且充分考虑到了项目的复用性、扩展性和易用性，且对开发者非常友好，开发者完全可以采用API式编程来应用方案，灵活度和自由度都有大幅提高。

需要指出，根据实施的需要，可将本发明实施例中描述的各个部件/步骤拆分为更多部件/步骤，也可将两个或多个部件/步骤或者部件/步骤的部分操作组合成新的部件/步骤，以实现本发明实施例的目的。

上述根据本发明实施例的方法可在硬件、固件中实现，或者被实现为可存储在记录介质(诸如CD ROM、RAM、软盘、硬盘或磁光盘)中的软件或计算机代码，或者被实现通过网络下载的原始存储在远程记录介质或非暂时机器可读介质中并将被存储在本地记录介质中的计算机代码，从而在此描述的方法可被存储在使用通用计算机、专用处理器或者可编程或专用硬件(诸如ASIC或FPGA)的记录介质上的这样的软件处理。可以理解，计算机、处理器、微处理器控制器或可编程硬件包括可存储或接收软件或计算机代码的存储组件(例如，RAM、ROM、闪存等)，当所述软件或计算机代码被计算机、处理器或硬件访问且执行时，实现在此描述的视图组件的虚拟路由方法。此外，当通用计算机访问用于实现在此示出的视图组件的虚拟路由方法的代码时，代码的执行将通用计算机转换为用于执行在此示出的视图组件的虚拟路由方法的专用计算机。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及方法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明实施例的范围。

以上实施方式仅用于说明本发明实施例，而并非对本发明实施例的限制，有关技术领域的普通技术人员，在不脱离本发明实施例的精神和范围的情况下，还可以做出各种变化和变型，因此所有等同的技术方案也属于本发明实施例的范畴，本发明实施例的专利保护范围应由权利要求限定。

Claims (8)

1.一种视图组件的虚拟路由方法，其特征在于，所述方法包括：

接收用于触发所述视图组件在Vue框架中的缓存抽象组件中缓存的操作，并根据所述操作，动态创建所述视图组件的第一具名组件，所述视图组件的第一具名组件为功能与所述视图组件的功能相同但组件的name属性与所述视图组件的name属性不相同的视图组件；

根据所述视图组件的第一具名组件，动态生成所述视图组件的第一具名组件的虚拟路由信息；

调用虚拟路由添加方法，以将所述视图组件的第一具名组件的虚拟路由信息添加到路由管理器的路由表中；

调用虚拟路由跳转方法，以根据生成的跳转路由信息，确定所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的第二具名组件；

对所述第二具名组件进行渲染，以获得所述第二具名组件的渲染数据，并将所述第二具名组件的渲染数据呈现于所述路由管理器的视图标签所指示的显示区域；

其中，在根据所述操作，动态创建所述视图组件的第一具名组件时，通过基于Vue框架的路由管理器，根据所述操作，确定缓存于所述缓存抽象组件中的所述视图组件的模板；通过所述路由管理器，根据所述视图组件的模板，动态创建所述视图组件的第一具名组件，并对所述视图组件的第一具名组件的属性进行配置；

在根据所述视图组件的第一具名组件，动态生成所述视图组件的第一具名组件的虚拟路由信息时，通过基于Vue框架的路由管理器，调用虚拟路由配置策略对象，以根据所述视图组件的第一具名组件，动态配置所述视图组件的第一具名组件的虚拟路由信息。

2.根据权利要求1所述的视图组件的虚拟路由方法，其特征在于，所述方法还包括：

通过所述路由管理器，检测所述视图组件的第一具名组件的虚拟路由信息是否存在；若不存在，则执行所述通过所述路由管理器，调用虚拟路由添加方法，以将所述视图组件的第一具名组件的虚拟路由信息添加到所述路由管理器的路由表中的步骤；若存在，则重新配置所述视图组件的第一具名组件的虚拟路由信息。

3.根据权利要求1所述的视图组件的虚拟路由方法，其特征在于，所述调用虚拟路由跳转方法，以根据生成的跳转路由信息，确定所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的第二具名组件，包括：

通过基于Vue框架的路由管理器，调用所述虚拟路由跳转方法，以传入跳转的目标路径和所述视图组件的模板，并根据所述跳转的目标路径和所述视图组件的模板，生成所述跳转路由信息，再确定所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的所述第二具名组件。

4.根据权利要求1所述的视图组件的虚拟路由方法，其特征在于，所述将所述视图组件的第一具名组件的虚拟路由信息添加到所述路由管理器的路由表中之后，所述方法还包括：

通过基于Vue框架的路由管理器，调用虚拟路由存储方法，以将添加到所述路由表中的虚拟路由信息持久化存储至终端设备的存储装置中。

5.根据权利要求4所述的视图组件的虚拟路由方法，其特征在于，所述将添加到所述路由表中的虚拟路由信息持久化存储至所述终端设备的存储装置中之后，所述方法还包括：

当检测到所述终端设备的页面被手动刷新时，通过所述路由管理器，调用钩子函数，以将所述存储装置中持久化存储的虚拟路由信息逐一添加到所述路由表中，并通过所述路由管理器，自动创建所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的第二具名组件。

6.一种视图组件的虚拟路由装置，其特征在于，所述装置包括：

动态创建模块，用于接收用于触发所述视图组件在Vue框架中的缓存抽象组件中缓存的操作，并根据所述操作，动态创建所述视图组件的第一具名组件，所述视图组件的第一具名组件为功能与所述视图组件的功能相同但组件的name属性与所述视图组件的name属性不相同的视图组件；

动态生成模块，用于根据所述视图组件的第一具名组件，动态生成所述视图组件的第一具名组件的虚拟路由信息；

第一调用模块，用于调用虚拟路由添加方法，以将所述视图组件的第一具名组件的虚拟路由信息添加到路由管理器的路由表中；

第二调用模块，用于调用虚拟路由跳转方法，以根据生成的跳转路由信息，确定所述路由表中与所述跳转路由信息匹配的虚拟路由信息所对应的第二具名组件；

渲染模块，用于对所述第二具名组件进行渲染，以获得所述第二具名组件的渲染数据，并将所述第二具名组件的渲染数据呈现于所述路由管理器的视图标签所指示的显示区域；

其中，在根据所述操作，动态创建所述视图组件的第一具名组件时，通过基于Vue框架的路由管理器，根据所述操作，确定缓存于所述缓存抽象组件中的所述视图组件的模板；通过所述路由管理器，根据所述视图组件的模板，动态创建所述视图组件的第一具名组件，并对所述视图组件的第一具名组件的属性进行配置；

在根据所述视图组件的第一具名组件，动态生成所述视图组件的第一具名组件的虚拟路由信息时，通过基于Vue框架的路由管理器，调用虚拟路由配置策略对象，以根据所述视图组件的第一具名组件，动态配置所述视图组件的第一具名组件的虚拟路由信息。

7.一种电子设备，其特征在于，所述设备包括：

处理器、存储器、通信接口和通信总线，所述处理器、所述存储器和所述通信接口通过所述通信总线完成相互间的通信；

所述存储器用于存放至少一可执行指令，所述可执行指令使所述处理器执行如权利要求1-5中任意一项权利要求所述的视图组件的虚拟路由方法对应的操作。

8.一种计算机存储介质，其特征在于，其上存储有计算机程序，该程序被处理器执行时实现如权利要求1-5中任意一项权利要求所述的视图组件的虚拟路由方法。