一、 目的：解決多工程之間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}`)