[发明专利]基于Vue的多级路由动态加载的实现方法

说明书

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

技术领域

本发明涉及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/占位符、……。