import() 动态加载component组件失败

在写 vue+element 从后台获取数据写导航栏 时,当我加载动态路由,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. 原因: 应该是在 webpack,webpack 编译 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组件,传入的格式为 'Home'return function (resolve) {require([`@/views${str}.vue`], resolve);};
}//使用
arr[i].children[j].component = _import(arr[i].children[j].component);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362550.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

进入登录页时,用户名输入框自动聚焦、按enter键让密码框聚焦,完整输入信息后登录

让element-ui的输入框聚焦的4种方式 思路:(可以跳过这一步看完整代码——完整代码) 1. 进入页面时,用户名输入框就要获取焦点,使用 自定义指令 聚焦更方便。当然也可以用 ref 在 mounted() 钩子函数中让输入框聚焦。 …

vue-cli安装步骤

vue-cli脚手架模板是基于node下的npm来完成安装的所以首先需要安装node 条件: node在4.以上,npm在3以上 安装 指令: 1、 npm install -g vue-cli在全局下安装vue-cli # 安装 vue-cli npm install -g vue-cli# 初始化 webpack 项目 vue in…

使用Java编写简单的老虎机游戏

无论游戏多么简单或复杂 ,Java都能胜任! 在这篇文章中,让我们看一下Java编程的初学者如何制作一个简单而功能齐全的老虎机。 老虎机已经存在很长时间了,但是它的娱乐价值似乎并没有减弱。 InterCasino是第一个在1996年向世界提供…

html笔记(二)html4+css2.0(元素类型、css精灵、宽度自适应、BFC、浏览器相关概述、css统筹)

大标题小节一、元素类型1. 元素分类2. 置换和非置换元素3. 元素类型转换二、css精灵三、宽高自适应1. 宽度自适应2. 高度自适应3. 最小高度自适应4. 高度塌陷及解决办法5. 元素的高度自适应屏幕的高度四、BEC概念应用1. 常见定位方案2. 触发BFC3. BFC特性及应用4. BFC概念五、浏…

25.C# 异步调用Web服务

1.创建Web服务 1.1VS新建ASP.Net空Web应用程序 1.2添加Web服务新建项 1.3添加GetWeather方法和相关类 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Services; using System.EnterpriseServices;namespace WebServ…

css中单位的使用

css中许多的属性都需要添加长度,而长度一般由数字和单位构成,如1px,1.5em,2vh;也可以省略单位,如line-height:1.5,表示行高为字体大小的1.5倍; 长度单位一般也分为相对长度和绝对长度。 (一)绝…

OSGi:进入微服务架构的门户

在构建可扩展,可靠的分布式系统的背景下,“模块化”和“微服务体系结构”这两个术语如今经常出现。 众所周知,Java平台本身在模块化方面很弱( Java 9将通过交付Jigsaw项目来解决这一问题),从而为OSGi和JBos…

html笔记(五)2D、3D、3D动画

大标题小节一、2D1. css3 渐变的语法及应用2. 动画过渡:transition3. 2D转换属性:transform二、3D1. 3D转换2. 3D视距3. 3D翻转方法4. 3D位置移动5. 3D缩放三、3D动画1. keyframes2. 动画属性animation一、2D 1. css3 渐变的语法及应用; &a…

基于上下文的访问控制

拓扑图 配置步骤 1配置端口ip地址,并检测连通性 服务器 ping pc端 服务器 telnet R3 2配置命令 R3(config)# ip access-list extended go R3(config-ext-nacl)# deny ip any any //此ACL目的是隔绝外网流量 R3(config-ext-nacl)# exit R3(config)# interface s0…

使用Gradle将JAR工件发布到Artifactory

因此,我浪费了一两天(投资)只是为了了解如何使用Gradle将JAR发布到本地运行的Artifactory服务器。 我使用Gradle Artifactory插件进行发布。 我迷失了无穷循环,包括各种版本的各种插件和执行各种任务。 是的,我之前阅读…

Combox使用的一些技巧

这些天做一个小型的CMS,也就几张表,用WCFLINQ2SQLSilverlight这种方式开发的,对最常用的控件如DataGrid,DataForm以及Toolkit里其它一些控件的用法有了一定的了解,同时参照JV9的教程,把Silverlight里的验证机制仔细的学…

HTML+css实现的效果

一、鼠标划过效果 1. 类似电子书的图书效果2. 绝对定位实用案例 二、锚点的应用 三、css精灵(图片整合) 用一张图片写出一串电话号码用一张图片写出导航栏的滑动效果 四、后台管理布局 单飞布局双飞布局后台页面管理布局 五、css3部分 在一个div…

[LeetCode] Longest Substring Without Repeating Characters 最长无重复字符的子串 C++实现java实现...

最长无重复字符的子串 Given a string, find the length of the longest substring without repeating characters. Example 1: Input: "abcabcbb" Output: 3 Explanation: The answer is "abc", with the length of 3. Example 2: Input: "bbbbb&qu…

使用自动机的Lucene新的邻近查询

最简单的Apache Lucene查询TermQuery匹配包含指定术语的任何文档,无论该术语出现在每个文档中的何处 。 使用BooleanQuery可以将多个TermQuery组合在一起,并完全控制哪些术语是可选的( SHOULD )和哪些是必需的( MUST &…

关于HTML的面试题-html4/css2篇

1. 什么是HTML?2. 用过什么调试器(浏览器),编辑器?3. HTML4.0 和 HTML5.0 的区别?4. 手写 HTML 代码5. 元素类型有哪些(display有哪些属性)?块元素、行元素和行内块元素的…

Java EE:异步构造和功能

介绍 Java EE具有许多API和构造以支持异步执行。 从可伸缩性和性能的角度来看,这是至关重要的。 让我们假设2个模块相互交互。 当模块A (发送方)以同步方式向模块B (接收方)发送消息时,通信将在单个线程的…

用 JA Transmenu 模块做多级弹出菜单

转自http://www.joomlagate.com “弹出菜单”这个说法本来不规范,尽管你我都明白这是什么意思,而实际上我们所理解的那个菜单样式英文说法是“Slide Menu”(滑动菜单),如果要用“弹出菜单”就成了“Popup Menu”。当然…

关于HTML的面试题-html5/css3篇

1. html5 新增标签有哪些(或者新增的语义标签)?2. HTML5 中有哪些新特性?3. 视频有哪几种格式?这几种格式有什么区别?4. 写出你知道的层级选择符(结构性伪类选择器)5. 什么是渐进增强…

Elasticsearch的用例:灵活的查询缓存

在前两篇有关Elasticsearch用例的文章中,我们已经看到Elasticsearch 可用于存储甚至大量文档 ,并且我们可以通过Query DSL使用Lucene的全文功能访问那些 文档 。 在这篇较短的文章中,我们将把两个用例放在一起,以了解读取繁重的应…

Vue底层架构及其应用(上)转

https://mp.weixin.qq.com/s?__bizMzIzNjcwNzA2Mw&mid2247486427&idx1&sn61f9579bbe1dfe26da4b53eb538fee13&chksme8d28643dfa50f557c56ce8b5bc9b0597a157a20791e21b1812fe2a30ff4cf2c813608473b43&mpshare1&scene23&srcid#rd 一、前言 市面上有很…