vue动态生成

vue项目根据后端返回的路由动态生成并添加

RouterView代码：

<template>

  <router-view></router-view>

</template>

RouterView只是用来中继子页面，才能让页面保持正常展示

 

如下图是前端页面文件结构

这是后台配置（URL就是路由路径，也是和前端目录路径一致，因为我是直接用URL来映射前端组件）

访问地址

 

 

buildRoutes(filterAsyncRoutes(后端返回的菜单))生成的vue路由直接通过 addRoutes直接插入原有的路由里

// 加载视图组件
function loadView(componentUrl) {
    return resolve => require.ensure([], () => resolve(require('@/views' + componentUrl)))
}

// 递归构造路由
function buildRoutes(routes) {
    return routes.map(route => {
        let _route = {};
        let meta = {
            title: route.name,
            icon: route.icon,
        };
        if (route.type == 1) { // 目录
            _route.component = route.parentId == 0 ? Layout : RouterView;
            if (route.children && route.children[0]) {
                _route.redirect = route.children[0].path;
            }
        } else if (route.type == 2) { // 菜单
            _route.component = loadView(route.url)
            meta.actionButtonList = route.children || []; 
        }
        return {
            path: route.url,
            name: route.code,
            ..._route,
            meta,
            children: route.type == 1 ? buildRoutes(route.children || []) : [], // 只有目录才去在构造children路由
        }
    })
}
// 递归过滤掉有重定向却没有children的父级路由
function filterAsyncRoutes(routes) {
    routes = routes.filter(d => {
        return d.type != 1 || (d.children && d.children.length > 0)
    })
    routes.forEach(route => {
        if (route.children && route.children.length > 0) {
            route.children = filterAsyncRoutes(route.children)
        }
    })
    return routes
}