【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}`)