vue-element-admin vue-router 动态路由 从服务器动态添加路由

用户登录成功，通过用户角色从服务器获取路由，添加到vue-router中。

因为侧边栏存在路由嵌套，所以后端设计数据库时添加父路由id字段，递归获取所有路由数据

根据路由格式创建Router类和路由meta信息类RouterMeta

路由格式

Router类

public class Router{
    /** id */
    private String id;
    /** 路径 */
    private String path;
    /** 装饰;使用哪个layout装饰 */
    private String component;
    /** 路由名字 */
    private String name;
    /** 重定向地址;重定向地址，在面包屑中点击会重定向去的地址 */
    private String redirect;
    /** 是否一直显示根路由 */
    private Boolean alwaysShow;
    /** 是否显示;如果设置为true，项目将不会显示在侧栏中(默认为false) */
    private Boolean hidden;
    /** 父级路由id */
    private String parentId;
    /** 路由顺序 */
    private Integer index;
    /** meta_id */
    private String metaId;

}

RouterMeta类

public class RouterMeta {
    /** id */
    private String id;
    /** 路由id */
    private String routerId;
    /** 名称;设置该路由在侧边栏和面包屑中展示的名字 */
    private String title;
    /** 侧栏图标 */
    private String icon;
    /** 固定在tags */
    private Boolean affix;
    /** 缓存;如果设置为true，则不会被 <keep-alive> 缓存 */
    private Boolean noCache;
    /** 路由控制角色集;控制页面角色(可以设置多个角色) */
    private String roles;
    /** 面包屑中显示;是否隐藏在breadcrumb中 */
    private Boolean breadcrumb;
    /** 高亮侧边栏路由 */
    private String activeMenu;


}

递归组装数据

最终返回给前端的是个集合List<RouterVo>

RouterVo类

public class RouterVo {

    /** 路径 */
    private String path;
    /** 装饰;使用哪个layout装饰 */
    private String component;
    /** 路由名字 */
    private String name;
    /** 重定向地址;重定向地址，在面包屑中点击会重定向去的地址 */
    private String redirect;
    /** 是否一直显示根路由 */
    private Boolean alwaysShow;
    /** 是否显示;如果设置为true，项目将不会显示在侧栏中(默认为false) */
    private Boolean hidden;
    /** meta_id */
    private RouterMetaVo meta;
    /** 子路由*/
    private List<RouterVo> children;

}

RouterMetavo类

public class RouterMetaVo {

    /** 名称;设置该路由在侧边栏和面包屑中展示的名字 */
    private String title;
    /** 侧栏图标 */
    private String icon;
    /** 固定在tags */
    private Boolean affix;
    /** 缓存;如果设置为true，则不会被 <keep-alive> 缓存 */
    private Boolean noCache;
    /** 路由控制角色集;控制页面角色(可以设置多个角色) */
    private List<String> roles;
    /** 面包屑中显示;是否隐藏在breadcrumb中 */
    private Boolean breadcrumb;
    /** 高亮侧边栏路由 */
    private String activeMenu;
}

前端收到信息后，遍历组装成一个路由对象数组，在router.beforeEach中router.addRoutes(Routers)添加路由

组装时注意路由的component 使用require而不是import

RomeRouter为从服务器获取的路由信息
currentRouter为组装的路由
if (RomeRouter.component === 'Layout') {
      currentRouter.component = Layout
    } else {
      let subView = RomeRouter.component
      subView = subView.replace(/^\/*/g, '')
      currentRouter.component = resolve => require([`@/views/${subView}`], resolve)
    }