vue动态添加vuex和路由

Question

我写了个工具函数用于动态添加路由模块和vuex模块

// 动态挂载路由
export const registerRouter = async (name: string) => {
    if(!name) return;
    // 1. 先删掉404
    router.removeRoute("err404");
    // 2. 挂载对应的路由模块
    const routers = await import(`@/router/modules/${name}/index.ts`);
    await routers.forEach((element: RouteRecordRaw) => {
        router.addRoute(element);
    });
    // 3. 挂载404模块
    router.addRoute(Err404)
}

// 动态注册vuex模块
export const registerModule = async (name: string) => {
    if (store.hasModule(name)) return;
    const module = await import(`@/store/modules/${name}/index.ts`);
    store.registerModule(name, module.default);
    store.commit("common/SET_MODULES", name); // 保存已经挂载的模块
};

但是现在有个很明显的问题

const module = await import(`@/store/modules/${name}/index.ts`);
 const routers = await import(`@/router/modules/${name}/index.ts`);

由于我的模块是动态添加引入的, 而我又使用的ts,这个在打包后会编译成js, 所以就会报错, 像这种动态添加我应该如何修改? 除了在文件首部将所有模块引入动态添加外还有没有更好的办法?

Answer 1

可以参考一下我的开源框架，对动态路由的实现；
从服务端得到路由表（服务端返回用户有权查看的路由），将路由添加到 vuex 中，注意这里有一个问题，如果仅仅只是把路由添加到 vuex ，那么原先的老路由依然有效，因此得优先 clear 老路由，再刷新新路由；

https://gitee.com/ericfang/easy-management/blob/master/ezm-app/src/store/modules/route.js

Answer 2

报错原因应该不是后缀名的改变，你看vue变成了js也能正常工作

Answer 3

动态引入模块~最好先定义变量接收路径

const path = `@/store/modules/${name}/index.ts`
const module = await import(path);