免费做app网站建设,网络培训的收获与感受,lamp wordpress 404,网址生成在写 vueelement 从后台获取数据写导航栏 时#xff0c;当我加载动态路由#xff0c;import() 总是失败。
假设 path: “/views/Home.vue”#xff0c;name: “Home”。
一、使用 import() 语法加载组件
参考#xff1a;“Cookysurongbin”的 解决vue动态路由异步加载im…在写 vueelement 从后台获取数据写导航栏 时当我加载动态路由import() 总是失败。
假设 path: “/views/Home.vue”name: “Home”。
一、使用 import() 语法加载组件
参考“Cookysurongbin”的 解决vue动态路由异步加载import组件,加载不到module的问题
arr[i].children[j].component () import(/views/Home.vue) //没有问题
arr[i].children[j].component () import(${arr[i].children[j].component}) //报错1. 原因 应该是在 webpackwebpack 编译 es6 动态引入 import() 时不能传入变量因为 webpack 的现在的实现方式不能实现完全动态。
2. 解决办法 可以通过字符串模板来提供部分信息给 webpack。
例如import(/${path}), 这样编译时会编译所有 /views 下的模块但运行时确定 path 的值才会加载从而实现懒加载。 如果写了给webpack还是不能识别那么可能你需要多些几级的路径如
arr[i].children[j].component () import(/views/${name}.vue);由于我粗心大意不小心漏掉了 () 这样写完之后报错原本是没有错的[Vue warn]: Failed to mount component: template or render function not defined.很多文章上说使用 require 加载组件。 二、使用 require 加载组件
arr[i].children[j].component (resolve) require([/views/${name}.vue], resolve);//成功具体的可以去看掘金上 webpack动态导入和require.context分析及使用注意 这篇文章。
因为我让后台在每个子路由中都返回了 component 字段所以上面这种情况不太现实。
arr[i].children[j].component resolve require([/views/${arr[i].children[j].component}.vue],resolve); //报错参考了 “ddx2019” 的 动态路由中有一步需将后端传回的component 的字符串模式改为我们前端路由需要的component模式,报错Cannot find module
function _import(str) { // views文件夹下的Home组件传入的格式为 Homereturn function (resolve) {require([/views${str}.vue], resolve);};
}//使用
arr[i].children[j].component _import(arr[i].children[j].component);
