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

权利要求书

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：浏览器将处理后的路由表呈现给用户终端。