router.addRouters()方法报错

breeze381

已于 2023-03-18 11:28:09 修改

阅读量728

点赞数

文章标签：前端后端 spring

于 2023-03-18 11:23:52 首次发布

本文链接：https://blog.csdn.net/weixin_62262335/article/details/129634149

版权

文章讲述了在新版VueRouter中如何使用addRoute方法动态添加路由，包括从后端获取数据，格式化路由信息，以及根据组件名动态导入对应的Vue组件。同时展示了递归处理嵌套路由的逻辑。

摘要由CSDN通过智能技术生成

动态路由的添加，关于router.addRoutes();

新版VueRouter废除了addRoutes();

//添加的数组改为addRoute(RouteRecordRaw);//添加的为对象原代码为：

const routers = store.getters.addRouters;
router.addRoutes(routers);

改为：

const routers = store.getters.addRouters;
routers.forEach((route) => {
  router.addRoute(route);
});

import request from "@/api/request";

export const initMenu = (router, store) => {
    request.menuinit().then(resp => {
        console.log(resp.data);
        let b = formatRoutes(resp.data);
        for (var i = 0; i < b.length; i++) {
            router.addRoute(b[i]);
        }
    })
}

// 此时参数routes是后端查询返回的路由参数
export const formatRoutes = (num) => {
    // 将转换好的对象存入该数组
    let rou = [];
    // 遍历routes 可以看到后端返回的数据是数组里面包含多个对象
    for (var i = 0; i < num.length; i++) {
        // 将menus里面的属性批量赋值给属性
        let {name, meta, path, component, iconCls, children} = num[i];
        if (num[i].children != null && num[i].children instanceof Array) {
            // 递归调用
            children = formatRoutes(num[i].children);
        }
        let fmRouter = {
            path: path,
            name: name,
            meta: meta,
            iconCls: iconCls,
            children: children,
            component: () => {
                if (component.startsWith('Emp')) {
                    import('../components/emp/' + component + '/.vue');
                } else if (component.startsWith('Per')) {
                    import('../components/per/' + component + '/.vue');
                } else if (component.startsWith('Sal')) {
                    import('../components/sal/' + component + '/.vue');
                } else if (component.startsWith('Sta')) {
                    import('../components/sta/' + component + '/.vue')
                } else if (component.startsWith('Sys')) {
                    import('../components/sys/' + component + '/.vue')
                }
            }
        };
        rou.push(fmRouter);
    }
    return rou;
}