Vue component import require default冲突问题

控制台报错

image.png

router.js

image.png

引用位置

image.png

components 更正前

image.png

components 更正后 default

image.png

require和import混合使用时会出现这种情况

1.针对本文情况
require 是 CommonJS 的模块导入方式,而组件定义时写的 export default 是 ES6 方式,因此require 导入的结果其实是一个含 default 属性的对象,所以 vue 中 component 用这个会报错,

  1. 针对router中使用require引入组件 使用components代替component成功解决报错分析如下:
    因为 vue 的命名视图组件注册恰好用的是 components ,而官方也说了“如果 router-view 没有设置名字,那么默认为 default”,所以这两个default 正好对应起来,于是加了s就不会报错了。
    参考:https://www.jianshu.com/p/4d61f71de95a

总结

  • 合理的用法应该是 require('xxx.vue').default 或是用 import。

参考:https://weiku.co/blog/41.html

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 3,351评论 1 22
  • 一、什么是MVVM? MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model...
    Ht_何甜阅读 2,264评论 2 71
  • 一、什么是MVVM? MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model...
    不期而遇_3491阅读 477评论 0 0
  • 一、什么是MVVM?MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model ...
    Gaochengxin阅读 1,737评论 1 53
  • 知道要学习,知道要学习写作,读书,演讲,人力资源,企业管理,情商等等,只要有利于成长,都想去试试。 但是改变是很痛...
    醉春风0920阅读 275评论 0 2

友情链接更多精彩内容