vue中动态路由加载组件,找不到module问题及解决

vue动态路由加载组件，找不到module

vue动态加载路由并挂载到vue。

路由信息由后端给出，同时component的路径也是后端给出，但是动态加载该路径会报错。

原因

webpack 编译es6 动态引入 import() 时不能传入变量，因此webpack目前不能做到完全的动态加载路由

解决方案

在import时，拼接一个静态的字符串，这样webpack就可以正常加载了。

 temp.component = () => import(`@/views/${menu.menuVueComponent}`) // 正确
 temp.component = () => import(`${menu.menuVueComponent}`) // 不能加载
 temp.component = () => import(menu.menuVueComponent) // 不能加载

前面直接拼@/会有一个scss样式报错，因为我在这里用的是vue-admin-template，可能是模板本身的问题，完全自己编写的后端不清楚会不会这样，如果@/不行，就多拼几层目录

vue动态路由加载时Cannot find module xxx错误解决

vue由静态路由改为动态路由时，出现下面的错误

静态路由懒加载，当我们把在router里面，把它写死在ts里时，它加载的ok的，可是我们通过api接口拉取过来的数据时，发现是不报了上面的错

// 静态路由懒加载
export const loadView = (view: any) => {
  return () => import(`@/views/${view}.vue`)
}

错误原因是webpack打包逻辑，webpack4中动态import不支持变量方式，查看路由返回的信息，只是返回一个方法。

而静态路由的返回，这个才是正确的组件返回方式

但是我们是要改为动态路由，则必须把它修改为

这样动态路由加载就OK了

export const loadView = (view: any) => {
  return (resolve: any) => require([`@/views/${view}.vue`], resolve)
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。