【Vue.js】---如何根据配置文件动态加载router

一、 目的：解决多工程之间router来回复制问题，将router写法改为有配置文件动态加载

二、方案：

1. 将需要的路由参数单独写到 RouteConfig.js 文件中

export default {
    plan: {
        path: "produce-plan",
        pagePath: "product-plan",
        exportName: "LibsProductPlan"
    },
    planEdit: {
        path: "produce-plan/edit",
        pagePath: "product-plan/EditPlan",
        exportName: "LibsProductPlanEdit"
    },
};

 

2. 在router->index.js文件中动态加载配置

1）写一段业务逻辑处理加载好的route

/**
 * @description 构造整个业务模块routes，动态配置
 * @param {Object} pathConfig 本地模块中配置的路由文件包含path、pagePath、exportName
 * @param {String} firstLevelName 本地模块中src目录的下一级文件夹名
 * @return {ArrayObject} arr 根据本地配置组装的routes
 */
const setModuleRoutes = (pathConfig, firstLevelName) => {
    let arr = [];
    for (let key in pathConfig) {
        let pagePath = pathConfig[key].pagePath;
        arr.push({
            path: pathConfig[key].path,
            name: pathConfig[key].path.replace("/", "-"),
            // 一定要用模板字符串方式拼接路径，并且第一位要带目录不能直接是变量，否则识别不了
            component: () => import(`@/${firstLevelName}/${pagePath}`),
        });
    }
    return arr;
};

 

2）在route中加入组装好的routes

// 导入1）中的方法
import LocalDynamicConfig from "@/utils/LocalDynamicConfig";

// 构造业务模块routes
let routesArr = LocalDynamicConfig.setModuleRoutes(PathConfig, "views");

const router = new Router({
    mode: "history",
    base: process.env.NODE_ENV === "production" ? "/portal/" : "/",
    routes: [
        {
            path: "/",
            name: "login",
            component: CommonViews.LibsLogin,
        },
        {
            path: "/main",
            name: "main",
            component: Main,
            children: [{
                path: "",
                redirect: "home",
            },
            {
                path: "home",
                name: "home",
                component: () => import("../views/Home.vue"),
            },
            // 加入构造好的routes
            ...routesArr
            ],
        },
    ],
});

三、Tips：

1. 在做动态添加component的时候，传入变量就会报错，出现以下错误信息：

vue-router.esm.js?fe87:1921 Error: Cannot find module '@/components/index'.
    at eval (eval at ./src/components lazy recursive (2.js:249), <anonymous>:5:9)

百度了下component是不允许传入变量的，但是程序员无所不能，就搞出下面这种写法来实现，注意不是单引号，是英文输入法下的～按键。然后${com}，其中com就是变量值。

注意：在import的时候，一定不能全部使用变量，的有一部分路径信息才行，我这里是@/components目录，如果只写变量是读取不到模块的。这样在编译的时候，会编译@/components目录下的所有模块，但是运行时才会确定变量的值，这样来实现懒加载。

component: () => import(`@/components/${com}`)