vue动态添加vuex和路由

苍山暮色烟雨迟
  • 219

我写了个工具函数用于动态添加路由模块和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, 所以就会报错, 像这种动态添加我应该如何修改? 除了在文件首部将所有模块引入动态添加外还有没有更好的办法?

回复
阅读 1k
3 个回答

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

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

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