CN113254100B - 基于Vue的多级路由动态加载的实现方法 - Google Patents

Abstract

本发明公开了基于Vue的多级路由动态加载的实现方法，前端配置静态路由；web端创建菜单，指定不同层级菜单的组件路径；用户登录，从服务端获取角色权限对应的路由数据并返回前端；前端通过路由懒加载方法将路由数据中的组件字符串转换为对象，根据映射规则将不同层级的路由与组件建立映射；前端依据vue‑router的addRoutes方法动态加载路由，得到处理后的路由表；浏览器根据处理后的路由表进行展示。本发明在采用后台动态加载路由，只需要在web端创建菜单，当用户登录后，获取对应的权限路由表，前端只需将组件依据规则映射成组件对象即可，易操作且便于维护。

Description

基于Vue的多级路由动态加载的实现方法

技术领域

本发明涉及web前端技术领域，具体的说，是基于Vue的多级路由动态加载的实现方法。

背景技术

在单页面富应用(SPA)的场景下，采用前后端分离的开发模式，前端路由配置尤为重要。路由加载一般采用两种方式，静态加载和动态加载。前者是前端写好全部静态路由，用户登录后依据角色权限筛选对应的路由表，其核心是前端控制路由；后者是用户登录后通过调用接口获取当前用户对应的权限路由表，前端获取数据后动态加载至路由表，其过程是由后端处理路由。

微服务场景下，路由匹配列表层级多、数据大，如果采用静态路由，需在路由匹配列表中将路由和组件进行一一映射，如果多级菜单，则会出现多个层级的嵌套，层级复杂不易维护。

对于路由层级多，权限设置复杂，通过后台传递路由表实现动态路由更便捷、易维护。本发明结合web端多级菜单配置，提出了一种基于vue的多级路由动态加载的实现方法。

发明内容

本发明的目的在于提供一种基于Vue的多级路由动态加载的实现方法，用于解决现有技术中静态路由在路由匹配列表中将路由和组件进行一一映射时，如果涉及多级菜单，则会出现多个层级的嵌套，层级复杂且不易维护的问题。

本发明通过下述技术方案解决上述问题：

一种基于Vue的多级路由动态加载的实现方法，包括：

步骤S100：前端配置静态路由：利用vue-router创建路由实例，在路由实例中设置静态路由匹配列表，其包括根路由、二级路由和三级路由，二级路由包括登录页面和布局页面，三级路由包括首页；目的是将与用户权限无关的路由提前配置好，方便后续步骤中将与用户权限相关的路由动态加载至路由表上。

步骤S200：web端创建菜单，根据不同层级加载路由的方式，指定不同层级菜单的组件路径；

步骤S300：用户登录，服务器获取角色权限对应的路由数据并返回前端；

步骤S400：前端通过AJAX获取路由数据，并采用路由懒加载方法加载映射组件。因为服务端返回路由表中的组件是字符串格式，是router实例中组件为对象，因此通过懒加载的方式进行格式转换，将路由数据中的组件字符串转换为对象，根据映射规则将不同层级的路由与组件建立映射；

步骤S500：前端依据vue-router的addRoutes方法动态加载路由，得到处理后的路由表；

步骤S600：浏览器将处理后的路由表呈现给用户终端。

所述映射规则为：

根路由，映射<router-view/>占位符；

二级路由，映射组件从低到高分别为可渲染组件、layout组件；

三级路由，映射组件从低到高分别为可渲染组件、layout组件、<router-view/>占位符；

……

多级路由，映射组件从低到高分布为可渲染组件、layout组件、<router-view/>占位符、<router-view/>占位符、……。

所述菜单包括菜单名称、权限标识、访问路径、组件路径、图标样式、重定向路径、排序、状态和类型。

本发明与现有技术相比，具有以下优点及有益效果：

本发明在采用后台动态加载路由，只需要在web端创建菜单，即可实现可视化的菜单层级，当用户登录后，通过服务端获取对应的权限路由表，前端只需将路由表中的组件依据一定的规则映射成组件对象即可。该方法易操作且便于维护。

附图说明

图1为本发明的原理框图。

具体实施方式

下面结合实施例对本发明作进一步地详细说明，但本发明的实施方式不限于此。

实施例：

结合附图1所示，一种基于Vue的多级路由动态加载的实现方法，包括：

步骤S100：前端配置静态路由：利用vue-router创建路由实例，在路由实例中设置静态路由匹配列表，静态路由匹配列表包括根路由、二级路由和三级路由，二级路由包括登录页面和布局页面，三级路由包括首页；目的是将与用户权限无关的路由提前配置好，方便后续步骤中将与用户权限相关的路由动态加载到路由表上。

例如：前端创建router文件夹、创建index.js文件，在routes中创建数组并指定路由匹配列表，同时添加至vue-router实例中。

步骤S200：web端创建菜单，根据不同层级加载路由的方式，指定不同层级组件的组件路径；

一级菜单：组件路径设置为’/’；

二级菜单：组件路径设置为’layout’；

三级菜单：如果该层级为最底层，组件路径设置为真实组件路径；如果不是最低层，组件路径为‘/’，即映射的组件对象为<router-view/>占位符，同时增加重定向路径，避免点击三级菜单页面空白，同时也确保菜单层级按预期加载；

四级菜单：同三级菜单类似。

所述菜单包括菜单名称、权限标识、访问路径、组件路径、图标样式、重定向路径、排序、状态和类型。

步骤S300：用户登录，服务端获取角色权限对应的路由数据返回前端，其中，权限设置是在步骤S200中配置完成。

步骤S400：前端通过AJAX获取路由数据，并采用路由懒加载方法加载映射组件。因为服务端返回路由表中的组件是字符串格式，而router实例中组件为对象，因此通过懒加载的方式进行格式转换，将路由数据中的组件字符串转换为对象，根据映射规则将不同层级的路由与组件建立映射；所述映射规则为：

根路由，映射<router-view/>占位符；

二级路由，映射组件从低到高分别为可渲染组件、layout组件；

三级路由，映射组件从低到高分别为可渲染组件、layout组件、<router-view/>占位符；

四级路由，映射组件从低到高分布为可渲染组件、layout、<router-view/>占位符、<router-view/>占位符；

……；

多级路由，映射组件从低到高分别为可渲染组件、layout组件、<router-view/>占位符、<router-view/>占位符、……。

<router-view/>占位符，本身是组件对象，可以直接加到路由匹配列表中。

<router-view/>占位符：表示该层级组件只是占位，没有真实可渲染的组件，如果该路由指定了默认页面，则需设置重定向；

之所以用占位，目的是确保菜单层级按预期效果加载。

步骤S500：前端依据vue-router的addRoutes方法动态加载路由，得到处理后的路由表；

步骤S600：浏览器将处理后的路由表呈现给用户终端。

尽管这里参照本发明的解释性实施例对本发明进行了描述，上述实施例仅为本发明较佳的实施方式，本发明的实施方式并不受上述实施例的限制，应该理解，本领域技术人员可以设计出很多其他的修改和实施方式，这些修改和实施方式将落在本申请公开的原则范围和精神之内。

Claims (1)

1.一种基于Vue的多级路由动态加载的实现方法，其特征在于，包括：

步骤S100：前端配置静态路由：利用vue-router创建路由实例，在路由实例中设置静态路由匹配列表，其包括根路由、二级路由和三级路由，二级路由包括登录页面和布局页面，三级路由包括首页；

步骤S200：web端创建菜单，根据不同层级加载路由的方式，指定不同层级菜单的组件路径；所述菜单包括菜单名称、权限标识、访问路径、组件路径、图标样式、重定向路径、排序、状态和类型；

步骤S300：用户登录，服务端获取角色权限对应的路由数据并返回前端；

步骤S400：前端通过路由懒加载方法将路由数据中的组件字符串转换为对象，根据映射规则将不同层级的路由与组件建立映射；所述映射规则为：

根路由，映射<router-view/>占位符；

二级路由，映射组件从低到高分别为可渲染组件、layout组件；

三级路由，映射组件从低到高分别为可渲染组件、layout组件、<router-view/> 占位符；

四级路由，映射组件从低到高分别为可渲染组件、layout组件、<router-view/>占位符、<router-view/>占位符；

步骤S500：前端依据vue-router的addRoutes方法动态加载路由，得到处理后的路由表；

步骤S600：浏览器将处理后的路由表呈现给用户终端。