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)
}
Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐