CN114268538A

CN114268538A - 前端路由的配置方法和装置

Info

Publication number: CN114268538A
Application number: CN202111495267.9A
Authority: CN
Inventors: 丁杰; 曾琳铖曦; 周旋; 吴鹏
Original assignee: Mashang Consumer Finance Co Ltd
Current assignee: Mashang Consumer Finance Co Ltd
Priority date: 2021-12-08
Filing date: 2021-12-08
Publication date: 2022-04-01

Abstract

本申请公开了一种前端路由的配置方法和装置，该方法包括：扫描指定目录，获取指定目录下的多个路由组件的路径信息，多个路由组件对应多个前端路由；获取多个前端路由的路由对象的属性信息，属性信息为预先自定义的属性信息；根据多个路由组件的路径信息和多个前端路由自定义的路由对象的属性信息，生成多个前端路由的配置信息；根据多个前端路由的配置信息进行路由配置。由于可以根据多个前端路由对应的路由组件的路径信息和多个前端路由的路由对象的属性信息自动生成多个前端路由的配置信息，进而根据多个前端路由的配置信息配置前端路由，因此，相较于手动配置前端路由，可以有效缩短前端路由的配置时间，提高前端路由的配置效率。

Description

前端路由的配置方法和装置

技术领域

本申请涉及互联网技术领域，尤其涉及一种前端路由的配置方法和装置。

背景技术

随着web的迅速发展，出现了各种各样的前端框架，比如，以vue、react为代表的mvvm框架。这些前端框架可以以单页应用(single page application，spa)的方式进行展示，以提高用户体验。

单页应用中最重要的一个模块是前端路由，如：vue-router、react-router等。在使用前端路由之前，通常需要对前端路由进行配置。然而，目前在配置前端路由时，通常由开发人员手动进行配置，当需要配置的前端路由较多时，会导致前端路由的配置效率较低。

发明内容

本申请实施例提供一种前端路由的配置方法和装置，用于解决目前由开发人员手动配置前端路由的配置效率较低的问题。

为解决上述技术问题，本申请实施例是这样实现的：

第一方面，提出一种前端路由的配置方法，包括：

扫描指定目录，获取所述指定目录下的多个路由组件的路径信息，所述多个路由组件对应多个前端路由；

获取所述多个前端路由的路由对象的属性信息，所述属性信息为预先自定义的属性信息；

根据所述路径信息和所述属性信息，生成所述多个前端路由的配置信息；

根据所述多个前端路由的配置信息进行路由配置。

第二方面，提出一种前端路由的配置装置，包括：

第一获取模块，扫描指定目录，获取所述指定目录下的多个路由组件的路径信息，所述多个路由组件对应多个前端路由；

第二获取模块，获取所述多个前端路由的路由对象的属性信息，所述属性信息为预先自定义的属性信息；

配置信息生成模块，根据所述路径信息和所述属性信息，生成所述多个前端路由的配置信息；

路由配置模块，根据所述多个前端路由的配置信息进行路由配置。

第三方面，本申请提供一种电子设备，包括：

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如第一方面所述的方法。

第四方面，本申请提供一种计算机可读存储介质，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如第一方面所述的方法。

本申请实施例采用的上述至少一个技术方案能够达到以下有益效果：

在配置前端路由时，可以扫描指定目录获取到多个前端路由对应的多个路由组件的路径信息，然后获取多个前端路由自定义的路由对象的属性信息，根据多个路由组件的路径信息和多个前端路由的路由对象的属性信息生成多个前端路由的配置信息，根据该配置信息进行路由配置。这样，在配置前端路由时，由于可以根据多个前端路由对应的路由组件的路径信息和多个前端路由的路由对象的属性信息自动生成多个前端路由的配置信息，进而根据多个前端路由的配置信息配置前端路由，因此，相较于手动配置前端路由，可以有效缩短前端路由的配置时间，提高前端路由的配置效率。

附图说明

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

图1是本申请的一个实施例前端路由的配置方法的流程示意图；

图2是本申请的一个实施例前端路由的配置方法的流程示意图；

图3是本申请的一个实施例电子设备的结构示意图；

图4是本申请的一个实施例前端路由的配置装置的结构示意图。

具体实施方式

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

本说明书和权利要求书中的术语“第一”、“第二”等是用于区别类似的对象，而不用于描述特定的顺序或先后次序。应理解这样使用的数据在适当情况下可以互换，以便本说明书实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，本说明书以及权利要求书中“和/或”表示所连接对象的至少其中之一，字符“/”一般表示前后关联对象是一种“或”的关系。

在web开发的过程中，路由的使用是必不可少的，这里的路由不是日常生活中的路由器，而是代表一个统一资源定位符(Uniform Resource Locator，URL)与相应处理程序的映射关系，具体而言，用户在输入要访问的URL之后，路由会解析URL中的路径，然后根据映射表中的映射关系查找相应的预设函数，并将结果返回给用户。路由可以分为前端路由和后端路由，前端路由不同于后端路由，前端路由不需要服务器进行解析，而是利用hash或者HTML5的historyAPI来实现。在进行开发时，前端路由用来设定访问路径，并将路径与相应的组件映射起来，用户在访问相应的路径时，前端路由根据映射关系实现不同组件间的切换，整个过程都是在同一个页面中实现，不涉及页面间的跳转，也就是我们常说的单页应用。

随着web的迅速发展，出现了各种各样的前端框架，比如，vue框架、react框架等。这些前端框架可以以单页应用的方式进行展示，而单页应用中最重要的一个模块就是前端路由。在单页应用中使用前端路由时，通常需要对前端路由进行配置，在配置前端路由时，可以由开发人员进行手动配置。以在vue框架下配置前端路由为例，开发人员在手动配置前端路由时，具体的配置过程可以包括以下步骤：

首先，开发人员会将所有的路由组件放到指定目录下；

其次，在指定目录下创建home目录(目录名可根据业务场景自定义)，并在该目录下定义路由组件；

再次，创建vue-router对象；

最后，把vue-router对象挂载到vue对象上，前端路由生效。

然而，在实际应用中，当需要配置的前端路由较多时，比如一些大型项目中会涉及很多的路由配置，此时若仍由开发人员进行手动配置，将会花费大量的时间，导致前端路由的配置效率较低。

为了解决上述技术问题，本申请实施例提供一种前端路由的配置方法和装置，该配置方法包括：扫描指定目录，获取所述指定目录下的多个路由组件的路径信息，所述多个路由组件对应多个前端路由；获取所述多个前端路由的路由对象的属性信息，所述属性信息为预先自定义的属性信息；根据所述路径信息和所述属性信息，生成所述多个前端路由的配置信息；根据所述多个前端路由的配置信息进行路由配置。

本申请实施例提供的技术方案的核心发明构思是：可以在指定目录下存放多个前端路由对应的多个路由组件，且可以自定义多个前端路由的路由对象的属性信息，在配置前端路由时，可以扫描指定目录获取到多个路由组件的路径信息，然后获取自定义的多个前端路由的路由对象的属性信息，根据多个路由组件的路径信息和多个前端路由的路由对象的属性信息生成多个前端路由的配置信息，根据该配置信息对前端路由进行配置。这样，在配置前端路由时，由于可以根据多个前端路由对应的路由组件的路径信息和多个前端路由的路由对象的属性信息自动生成多个前端路由的配置信息，进而根据多个前端路由的配置信息配置前端路由，因此，相较于手动配置前端路由，可以有效缩短前端路由的配置时间，提高前端路由的配置效率。

应理解，本说明书实施例提供的前端路由的配置方法可以由电子设备执行或安装在电子设备中的软件执行，具体可以由终端设备或服务端设备执行。在一种更为具体的实现方式中，该执行主体可以是用于实现单页应用开发项目的服务端。具体而言，可以将用于实现本申请实施例提供的前端路由的配置方法的实现代码布局在服务端中，在开发单页应用时，可以由服务端自动执行该实现代码进而自动完成单页应用的前端路由配置。或者也可以将用于实现本申请实施例提供的前端路由的配置方法的实现代码打包为代码包，在服务端中引入接口，服务端可通过该接口加载代码包，在加载代码包后，可以自动执行该实现代码进而自动完成单页应用的前端路由配置。这样，由实现单页应用开发项目的服务端作为执行主体，一方面在开发单页应用的过程中可以自动实现前端路由的配置，提高前端路由的配置效率，另一方面，当需要增加/修改路由配置时，只需在指定目录下添加/修改对应的路由组件或重新自定义路由对象的属性信息，就可以由服务端实现前端路由的自动添加/修改，无需手动进行维护，从而提高前端路由的配置效率。

以下结合附图，详细说明本申请各实施例提供的技术方案。

图1是本申请的一个实施例前端路由的配置方法的流程示意图。所述方法如下所述。

S102：扫描指定目录，获取指定目录下的多个路由组件的路径信息，多个路由组件对应多个前端路由。

在S102中，指定目录下可以存放待配置的多个前端路由对应的多个路由组件，在配置前端路由时可以扫描指定目录，在扫描结束后，可以获取到指定目录下的多个路由组件的路径信息。其中，一个前端路由可以对应一个或多个路由组件，为了便于理解，本申请实施例可以以一个前端路由对应一个路由组件为例进行说明。

指定目录可以views或pages目录，可以自定义，也可以是默认的用于存放路由组件的目录，这里不做具体限定。本申请实施例中，可以将待配置的所有前端路由所对应的路由组件都存放到指定目录中，这样，在扫描指定目录后，可以同时获取到与待配置的所有前端路由对应的所有路由组件的路径信息。路由组件可以是前端框架的组件中需要与前端路由的URL路径建立映射关系的组件，比如，在vue框架中，路由组件可以是vue组件中需要与前端路由的URL路径建立映射关系的组件。路由组件的路径信息可以是路由组件的存储路径。比如，在vue框架中，在指定目录为/src/views的情况下，路由组件的路径信息可以是/src/views/user/add/index.vue。

可选地，在扫描指定目录时，可以是对指定目录进行动态扫描。在一种实现方式中，可以使用nodejs的glob模块和fs模块动态扫描指定目录，当然，在其他实现方式中，也可以使用其他方法扫描指定目录，只要可以实现对指定目录的动态扫描即可。

S104：获取多个前端路由的路由对象的属性信息，属性信息为预先自定义的属性信息。

在S104中，在想要重写前端路由的某些属性时，可以预先自定义前端路由的路由对象的属性信息。这样，在配置前端路由时，针对需要配置的多个前端路由，可以获取预先针对多个前端路由预先自定义的路由对象的属性信息，以便后续可以根据该多个前端路由自定义的属性信息生成多个前端路由的配置信息。其中，在获取多个前端路由的路由对象的属性信息时，可以针对多个前端路由中的每个前端路由，分别获取每个前端路由的路由对象的属性信息。

可选地，针对每个前端路由而言，其自定义的路由对象的属性信息可以包括自定义的URL路径和自定义的路由名称中的至少一种。可选地，该属性信息还可以包括前端路由的其他属性，比如meta等。

S106：根据路径信息和属性信息，生成多个前端路由的配置信息。

在获取到多个路由组件的路径信息和多个前端路由自定义的路由对象的属性信息后，可以基于该路径信息和属性信息自动生成多个前端路由的配置信息。本申请实施例中，多个前端路由的配置信息可以用于对多个前端路由进行配置。

在一种实现方式中，在生成多个前端路由的配置信息时，可以针对每个前端路由分别生成对应的配置信息，得到与每个前端路由各自对应的配置信息，根据与每个前端路由各自对应的配置信息，可以得到多个前端路由的配置信息，具体而言，可以将每个前端路由各自对应的配置信息进行整合，整合后的配置信息即为多个前端路由的配置信息。也就是说，最终生成的多个前端路由的配置信息中可以包括多个配置信息，该多个配置信息与多个前端路由相对应，具体可以是一个配置信息对应一个前端路由，且一个配置信息用于对一个前端路由进行配置。

S108：根据多个前端路由的配置信息进行路由配置。

在S108中，可以基于S106中生成的多个前端路由的配置信息自动进行路由配置。这样，在配置前端路由时，由于可以根据多个前端路由对应的多个路由组件的路径信息和多个前端路由自定义的路由对象的属性信息自动生成多个前端路由的配置信息，进而根据多个前端路由的配置信息配置前端路由，因此，相较于手动配置前端路由，可以有效缩短前端路由的配置时间，进而提高前端路由的配置效率。

在上述S104中，在获取多个前端路由中每个前端路由的自定义的路由对象的属性信息时，至少可以通过以下两种方式实现：

第一种方式：针对多个前端路由中的每个前端路由，对前端路由对应的路由组件进行解析，获取在路由组件中自定义的路由标签，路由标签中包括自定义的路由对象的属性信息。

以一个前端路由为例，在自定义前端路由的路由对象的属性信息时，可以在前端路由对应的路由组件中进行自定义。具体地，可以在路由组件中自定义路由标签(即route标签)，该路由标签中包括自定义的路由对象的属性信息。这样，在获取前端路由自定义的路由对象的属性信息时，可以对路由组件进行解析得到路由组件中自定义的路由标签，进而得到路由标签中自定义的路由对象的属性信息。

第二种方式：针对多个前端路由中的每个前端路由，从前端路由的配置文件中获取自定义的路由对象的属性信息，配置文件中存储有自定义的路由对象的属性信息。

以一个前端路由为例，在自定义前端路由的路由对象的属性信息时，可以在前端路由的配置文件中自定义路由对象的属性信息。这样，在获取前端路由自定义的路由对象的属性信息时，可以先获取前端路由的配置文件，然后从配置文件中获取自定义的路由对象的属性信息。其中，前端路由的配置文件可以是与前端路由对应的路由组件属于同层级的且具有相同名称的文件，这样，可以便于快速获取到前端路由的配置文件进而快速获取到前端路由自定义的路由对象的属性信息。

通过在前端路由的路由组件中自定义路由对象的属性信息或在前端路由的配置文件中自定义路由对象的属性信息，使得在获取前端路由自定义的路由对象的属性信息时，可以通过解析路由组件或获取配置文件的方式方便地获取到自定义的路由对象的属性信息。

在一种可能的实现方式中，考虑到实际的应用场景，为了使获取自定义的属性信息的方式与实际的应用场景更为匹配，在配置vue框架中的前端路由时，可以使用上述第一种方式获取前端路由自定义的路由对象的属性信息，即在路由组件中自定义路由对象的属性信息，从而可以避免使用配置文件存储属性信息所带来的资源消耗。在配置react框架中的前端路由时，可以使用上述第二种方式获取前端路由自定义的路由对象的属性信息，从而可以无需进行组件解析，节省前端路由的配置时间，提高配置效率。

需要说明的是，在获取多个前端路由中每个前端路由的路由对象的属性信息时，以一个前端路由为例，获取到的路由对象的属性信息可能为空，属性信息为空可以说明没有自定义路由对象的属性信息，在这种情况下，后续在生成该前端路由的配置信息时，可以仅根据前端路由对应的路由组件的路径信息生成前端路由的配置信息。本申请实施例可以以预先自定义了路由对象的属性信息为例进行说明。

在上述S106中，在针对每个前端路由分别生成对应的配置信息时，以一个前端路由为例，可以根据该前端路由对应的路由组件的路径信息和该前端路由自定义的路由对象的属性信息生成该前端路由的配置信息时，具体可以包括以下步骤：

首先，根据前端路由对应的路由组件的路径信息生成前端路由的第一URL路径和第一路由名称；

其次，根据前端路由的第一URL路径和第一路由名称、前端路由自定义的路由对象的属性信息生成前端路由的配置信息。

在一种实现方式中，根据前端路由对应的路由组件的路径信息生成前端路由的第一URL路径，具体可以是根据路由组件的路径信息和预设的URL路径规则生成第一URL路径。该预设的URL路径规则可以包括以下至少一项：

以路径信息中的根目录为起点；

删除路径信息中的组件后缀；

以index结尾时，删除index；

以下划线“_”开头的目录作为路径参数；

以下划线“_”开头的路由组件作为路径可选参数；

以双下划线“__”开头或结尾的路由组件忽略。

比如，假设路径信息为/src/views/user/add/index.vue，基于预设的URL路径规则生成的URL路径可以是/user/add。

在一种实现方式中，根据前端路由对应的路由组件的路径信息生成前端路由的第一路由名称，具体可以是根据路由组件的路径信息和预设的路由名称生成规则生成第一路由名称。预设的路由名称生成规则可以包括以下至少一项：

忽略路径信息中的根目录；

忽略路径信息中的下划线；

使用预设符号替换路径信息中的斜杠，预设符号可以是横杠或其他非斜杠的符号。

比如，假设路径信息为/src/views/user/add/index.vue，基于预设的路由名称生成规则生成的路由名称可以是user-add-index。

在生成前端路由的第一URL路径和第一路由名称后，在根据前端路由的第一URL路径和第一路由名称、前端路由自定义的路由对象的属性信息生成前端路由的配置信息时，可以将前端路由的第一URL路径、第一路由名称以及自定义的路由对象的属性信息进行组合，进而生成前端路由的配置信息。

具体地，自定义的路由对象的属性信息中可以包括自定义的第二URL路径和第二路由名称中的至少一种。在将第一URL路径、第一路由名称以及属性信息进行组合时，若属性信息中包括第二URL路径，即自定义了前端路由的URL路径，则可以由自定义的第二URL路径覆盖根据路由组件的路径信息生成的第一URL路径，即由自定义的第二URL路径替换生成的第一URL路径。若属性信息中包括第二路由名称，即自定义了前端路由的路由名称，则可以由自定义的第二路由名称覆盖根据路由组件的路径信息生成的第一路由名称，即由自定义的第二路由名称替换生成的第一URL路径。若属性信息中包括第二URL路径和第二路由名称，即自定义了前端路由的URL路径和路由名称，则可以由自定义的第二URL路径覆盖生成的第一URL路径，由自定义的第二路由名称覆盖生成的第一路由名称。在进行URL路径和/或路由名称的覆盖后，可以得到前端路由的配置信息。

在一种可能的实现方式中，前端路由的配置信息可以表示为：{path,name,component,…route}。其中，path为前端路由的URL路径，在自定义的路由对象的属性信息中不包括第二URL路径的情况下，path具体为第一URL路径，在自定义的路由对象的属性信息中包括第二URL路径的情况下，path具体为第二URL路径。name为前端路由的路由名称，在自定义的路由对象的属性信息中不包括第二路由名称的情况下，name具体为第一路由名称，在自定义的路由对象的属性信息中包括第二路由名称的情况下，name具体为第二路由名称。component为路由组件的对象，…route为属性信息中除第二URL路径和第二路由名称以外的信息，比如meta等。

由于在自定义了前端路由的URL路径和/或路由名称的情况下，可以基于自定义的URL路径和/或路由名称生成前端路由的配置信息，因此，可以实现对路由配置的可控性。此外，当需要修改前端路由的配置时，还可以通过对路由对象的属性信息进行自定义的方式方便地修改路由配置，从而提高配置效率。

在上述S108中，根据多个前端路由的配置信息配置前端路由，可以包括以下步骤：

首先，根据多个前端路由的配置信息创建路由实例。

这里可以根据多个前端路由的配置信息创建一个路由实例，该一个路由实例可以对应一个单页应用，且一个路由实例下有多个路由对象。在创建路由实例时，具体地，可以根据多个前端路由的配置信息生成指定路径下的目标文件，即生成完整的路由配置到指定路径下的文件中，该目标文件可以用于创建路由实例。比如，可以根据多个前端路由的配置信息生成目标文件/src/views/index.js，/src/views/为指定路径。在生成目标文件后，基于目标文件创建前端路由的路由实例。

其次，将路由实例初始化到目标实例中。

目标实例可以是前端框架下的全局实例，前端框架可以是待配置前端路由的框架。比如，若前端框架为vue框架，则该目标实例可以是全局的vue实例。将路由实例初始化到目标实例可以是将路由实例挂载到目标实例上。在将路由实例初始化到目标实例后，就完成了前端路由的自动绑定，即将目标实例与路由配置进行绑定。

这样，在生成多个前端路由的配置信息后，根据多个前端路由的配置信息创建路由实例，然后将路由实例初始化到目标实例中，可以完成前端路由的自动绑定，进而实现前端路由的自动配置，有效提高了路由配置的效率。

图2是本申请的一个实施例前端路由的配置方法的流程示意图。图2所示的实施例以配置vue框架中的多个前端路由为例进行说明，图2所示的实施例可以包括以下步骤。

S201：创建buildRoutes.js文件。

该buildRoutes.js文件中包括一些代码工具，具体可以实现动态获取待配置的多个前端路由对应的所有路由组件，并自动解析生成完整的路由配置。

S202：扫描指定目录，获取指定目标下的与多个前端路由对应的多个路由组件的路径信息。

比如，这里的指定目录可以是src/views，在对该目录进行扫描后，可以获得该目标下所有路由组件的完整路径。具体的实现代码如下：

//扫描所有视图组件并生成Router规则

const urls＝glob.sync('./src/views/**/*.vue')

这里的视图组件即为路由组件。以其中一个路由组件为例，扫描得到的路由组件的路径信息可以是/src/views/user/add/index.vue。

S203：针对多个路由组件中的每个路由组件，根据路由组件的路径信息和预设的URL路径规则生成URL路径。

预设的URL路径规则可以包括以下至少一项：

以路径信息中的根目录为起点；

删除路径信息中的组件后缀；

以index结尾时，删除index；

以下划线“_”开头的目录作为路径参数；

以下划线“_”开头的路由组件作为路径可选参数；

以双下划线“__”开头或结尾的路由组件忽略。

在根据预设的URL路径规则生成URL路径时，具体的实现代码如下：

以上述S202中的路径信息/src/views/user/add/index.vue为例，基于预设的URL路径规则生成的URL路径可以是/user/add。

S204：针对多个路由组件中的每个路由组件，根据路由组件的路径信息和预设的路由名称生成规则生成路由名称。

预设的路由名称生成规则可以包括以下至少一项：

忽略路径信息中的根目录；

忽略路径信息中的下划线；

在根据预设的路由名称生成规则生成路由名称时，具体的实现代码如下：

//页面名称默认为目录层级用-分割，如user-add-index

const name＝url.replace(/^\.\/src\/views\//,”).replace(/\//g,'-').replace(/(_)|(\.vue$)/g,”)

以上述S202中的路径信息/src/views/user/add/index.vue为例，基于预设的路由名称生成规则生成的路由名称可以是user-add-index。

S205：解析多个路由组件中的每个路由组件，获取路由组件中自定义的路由标签，路由标签中包括自定义的路由对象的属性信息。

这里可以使用vue-template-compiler和@vue/compiler-sfc插件对路由组件进行解析，获取自定义标签route的内容，route标签定义了route对象的属性，用于特殊场景下自定义route属性，可以重写自动生成的route属性。其中，自定义的路由对象的属性信息可以包括自定义的URL路径和自定义的路由名称中的至少一种，可选地，还可以包括meta等属性。

具体的实现代码如下：

S206：针对多个前端路由中的每个前端路由，根据前端路由的URL路径、路由名称以及自定义的路由对象的属性信息，生成前端路由的配置信息。

针对每个前端路由，生成前端路由的配置信息的具体实现方式可以参见图1所示实施例中相应步骤的具体实现，这里不再详细说明。生成的配置信息可以表示为：{path,name,component,…route}。具体的实现代码如下：

S207：根据多个前端路由的配置信息生成指定路径下的目标文件。

该步骤即为生成完整的路由配置到指定路径下的文件中，该文件可以用于创建路由实例。比如可以生成/src/views/index.js文件，/src/views/即为指定路径。具体的实现代码如下：

//写入目标文件路径

const TARGET_FILE_PATH＝'./src/views/index.js'

//生成视图路由

fs.writeFileSync(TARGET_FILE_PATH,`export default${JSON.stringify(routers)}`)

S208：根据多个前端路由的配置信息，创建vue-router实例。

具体的实现代码如下：

S209：将vue-router实例初始化到vue实例中。

至此，就完成了所有前端路由的自动绑定。

基于本申请实施例提供的技术方案，在配置前端路由时，可以扫描指定目录获取到多个前端路由对应的多个路由组件的路径信息，然后获取多个前端路由自定义的路由对象的属性信息，根据多个路由组件的路径信息和多个前端路由的路由对象的属性信息生成多个前端路由的配置信息，根据该配置信息进行路由配置。这样，在配置前端路由时，由于可以根据多个前端路由对应的路由组件的路径信息和多个前端路由的路由对象的属性信息自动生成多个前端路由的配置信息，进而根据多个前端路由的配置信息配置前端路由，因此，相较于手动配置前端路由，可以有效缩短前端路由的配置时间，提高前端路由的配置效率。

上述对本申请特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

图3是本申请的一个实施例电子设备的结构示意图。请参考图3，在硬件层面，该电子设备包括处理器，可选地还包括内部总线、网络接口、存储器。其中，存储器可能包含内存，例如高速随机存取存储器(Random-Access Memory，RAM)，也可能还包括非易失性存储器(non-volatile memory)，例如至少1个磁盘存储器等。当然，该电子设备还可能包括其他业务所需要的硬件。

处理器、网络接口和存储器可以通过内部总线相互连接，该内部总线可以是ISA(Industry Standard Architecture，工业标准体系结构)总线、PCI(PeripheralComponent Interconnect，外设部件互连标准)总线或EISA(Extended Industry StandardArchitecture，扩展工业标准结构)总线等。所述总线可以分为地址总线、数据总线、控制总线等。为便于表示，图3中仅用一个双向箭头表示，但并不表示仅有一根总线或一种类型的总线。

存储器，用于存放程序。具体地，程序可以包括程序代码，所述程序代码包括计算机操作指令。存储器可以包括内存和非易失性存储器，并向处理器提供指令和数据。

处理器从非易失性存储器中读取对应的计算机程序到内存中然后运行，在逻辑层面上形成前端路由的配置装置。处理器，执行存储器所存放的程序，并具体用于执行以下操作：

根据所述多个前端路由的配置信息进行路由配置。

上述如本申请图3所示实施例揭示的前端路由的配置装置执行的方法可以应用于处理器中，或者由处理器实现。处理器可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(Network Processor，NP)等；还可以是数字信号处理器(Digital SignalProcessor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本申请实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器，处理器读取存储器中的信息，结合其硬件完成上述方法的步骤。

该电子设备还可执行图1和图2的方法，并实现前端路由的配置装置在图1和图2所示实施例中的功能，本申请实施例在此不再赘述。

当然，除了软件实现方式之外，本申请的电子设备并不排除其他实现方式，比如逻辑器件抑或软硬件结合的方式等等，也就是说以下处理流程的执行主体并不限定于各个逻辑单元，也可以是硬件或逻辑器件。

本申请实施例还提出了一种计算机可读存储介质，该计算机可读存储介质存储一个或多个程序，该一个或多个程序包括指令，该指令当被包括多个应用程序的便携式电子设备执行时，能够使该便携式电子设备执行图1和图2所示实施例的方法，并具体用于执行以下操作：

根据所述多个前端路由的配置信息进行路由配置。

图4是本申请的一个实施例前端路由的配置装置40的结构示意图。请参考图4，在一种软件实施方式中，所述前端路由的配置装置40可包括：第一获取模块41、第二获取模块42、配置信息生成模块43和路由配置模块44，其中：

第一获取模块41，扫描指定目录，获取所述指定目录下的多个路由组件的路径信息，所述多个路由组件对应多个前端路由；

第二获取模块42，获取所述多个前端路由的路由对象的属性信息，所述属性信息为预先自定义的属性信息；

配置信息生成模块43，根据所述路径信息和所述属性信息，生成所述多个前端路由的配置信息；

路由配置模块44，根据所述多个前端路由的配置信息进行路由配置。

基于本申请实施例提供的前端路由的配置装置，在配置前端路由时，可以扫描指定目录获取到多个前端路由对应的多个路由组件的路径信息，然后获取多个前端路由自定义的路由对象的属性信息，根据多个路由组件的路径信息和多个前端路由的路由对象的属性信息生成多个前端路由的配置信息，根据该配置信息进行路由配置。这样，在配置前端路由时，由于可以根据多个前端路由对应的路由组件的路径信息和多个前端路由的路由对象的属性信息自动生成多个前端路由的配置信息，进而根据多个前端路由的配置信息配置前端路由，因此，相较于手动配置前端路由，可以有效缩短前端路由的配置时间，提高前端路由的配置效率。

可选地，所述第二获取模块42获取所述多个前端路由的路由对象的属性信息，包括：

针对所述多个前端路由中的每个前端路由，对前端路由对应的路由组件进行解析，获取在所述路由组件中自定义的路由标签，所述路由标签中包括自定义的路由对象的属性信息；或，

针对所述多个前端路由中的每个前端路由，从前端路由对应的配置文件中获取自定义的路由对象的属性信息，所述配置文件中存储有自定义的路由对象的属性信息。

可选地，所述配置信息生成模块43根据所述路径信息和所述属性信息，生成所述多个前端路由的配置信息，包括：

针对所述多个前端路由中的每个前端路由，根据前端路由对应的路由组件的路径信息以及路由对象的属性信息，生成所述前端路由的配置信息；

根据所述多个前端路由中的每个前端路由的配置信息，生成所述多个前端路由的配置信息。

可选地，所述配置信息生成模块43根据前端路由对应的路由组件的路径信息以及路由对象的属性信息，生成所述前端路由的配置信息，包括：

根据前端路由对应的路由组件的路径信息生成所述前端路由的第一统一资源定位符URL路径和第一路由名称；

根据所述前端路由的第一URL路径和第一路由名称、路由对象的属性信息生成所述前端路由的配置信息。

可选地，所述配置信息生成模块43根据前端路由对应的路由组件的路径信息生成所述前端路由的第一URL路径和第一路由名称，包括：

根据所述路由组件的路径信息和预设的URL路径规则生成所述前端路由的第一URL路径；

根据所述路由组件的路径信息和预设的路由名称生成规则生成所述前端路由的第一路由名称。

可选地，属性信息中包括自定义的第二URL路径和自定义的第二路由名称中的至少一种；

所述配置信息生成模块43根据所述前端路由的第一URL路径和第一路由名称、路由对象的属性信息生成所述前端路由的配置信息，包括：

将所述前端路由的第一URL路径、所述第一路由名称以及路由对象的属性信息进行组合，生成所述前端路由的配置信息；

其中，在所述属性信息中包括所述第二URL路径的情况下，由所述第二URL路径覆盖所述第一URL路径；

在所述属性信息中包括所述第二路由名称的情况下，由所述第二路由名称覆盖所述第一路由名称；

在所述属性信息中包括所述第二URL路径和所述第二路由名称的情况下，由所述第二URL路径覆盖所述第一URL路径，以及由所述第二路由名称覆盖所述第一路由名称。

可选地，所述路由配置模块44根据所述多个前端路由的配置信息进行路由配置，包括：

根据所述多个前端路由的配置信息创建路由实例；

将所述路由实例初始化到目标实例中，所述目标实例为前端框架的全局实例，所述前端框架为待配置前端路由的框架。

可选地，所述路由配置模块44根据所述多个前端路由的配置信息创建路由实例，包括：

根据所述多个前端路由的配置信息生成指定路径下的目标文件，所述目标文件用于创建所述路由实例；

根据所述目标文件创建所述路由实例。

本申请实施例提供的前端路由的配置装置40还可执行图1和图2的方法，并实现前端路由的配置装置在图1和图2所示实施例的功能，本申请实施例在此不再赘述。

总之，以上所述仅为本申请的较佳实施例而已，并非用于限定本申请的保护范围。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机。具体的，计算机例如可以为个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任何设备的组合。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

本申请中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

Claims

1.一种前端路由的配置方法，其特征在于，包括：

根据所述多个前端路由的配置信息进行路由配置。

2.如权利要求1所述的方法，其特征在于，所述获取所述多个前端路由的路由对象的属性信息，包括：

3.如权利要求1所述的方法，其特征在于，所述根据所述路径信息和所述属性信息，生成所述多个前端路由的配置信息，包括：

针对所述多个前端路由中每个前端路由，根据前端路由对应的路由组件的路径信息以及路由对象的属性信息，生成所述前端路由的配置信息；

根据所述多个前端路由中每个前端路由的配置信息，生成所述多个前端路由的配置信息。

4.如权利要求3所述的方法，其特征在于，所述根据前端路由对应的路由组件的路径信息以及路由对象的属性信息，生成所述前端路由的配置信息，包括：

5.如权利要求4所述的方法，其特征在于，所述根据前端路由对应的路由组件的路径信息生成所述前端路由的第一URL路径和第一路由名称，包括：

6.如权利要求4所述的方法，其特征在于，所述属性信息中包括自定义的第二URL路径和自定义的第二路由名称中的至少一种；

所述根据所述前端路由的第一URL路径和第一路由名称、路由对象的属性信息生成所述前端路由的配置信息，包括：

7.如权利要求1所述的方法，其特征在于，所述根据所述多个前端路由的配置信息进行路由配置，包括：

根据所述多个前端路由的配置信息创建路由实例；

8.如权利要求7所述的方法，其特征在于，所述根据所述多个前端路由的配置信息创建路由实例，包括：

根据所述目标文件创建所述路由实例。

9.一种前端路由的配置装置，其特征在于，包括：

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

处理器；

用于存储所述处理器可执行指令的存储器；

其中，所述处理器被配置为执行所述指令，以实现如权利要求1至8中任一项所述的方法。

11.一种计算机可读存储介质，其特征在于，当所述存储介质中的指令由电子设备的处理器执行时，使得电子设备能够执行如权利要求1至8中任一项所述的方法。