Vue中使用import进行路由懒加载的原理分析
更新时间：2022年04月01日 11:57:02 作者：qq_36437172
这篇文章主要介绍了Vue中使用import进行路由懒加载的原理分析。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
使用import进行路由懒加载的原理
首先我们来说说，import 和 require 的区别
node 编程中最重要的思想就是模块化，import 和 require 都是被模块化所使用。
（1）遵循规范
require是 AMD规范引入方式import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法
（2）调用时间
require是运行时调用，所以require理论上可以运用在代码的任何地方import是编译时调用，所以必须放在文件开头
（3）本质
require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES6，也仅仅是将ES6转码为ES5再执行，import语法会被转码为require
在路由中，我们如何使用懒加载呢？
export default new VueRouter({
routes: [
{
path: '/',
component: () => import('../components/Navigator')
}
]
})使用路由懒加载的写法，只会在进入当前这个路由时候才会走 component ，然后在运行import编译加载相应的组件。
可以理解也是为通过Promise的resolve机制。因为Promise函数返回的Promise为resolve组件本身，而我们又可以使用import来导入组件。
注意：import会返回一个Promise对象。
setTimeout(() => {
import('./dynamic-data.js').then(res => {
console.log(res.default.message)
})
}, 1500)
// dynamic-data.js
export default {
message: 'this is message'
}vue路由懒加载，使用import无法处理
问题原因：import属于异步引用组件，需要特殊的babel-loader处理
解决
npm i babel-plugin-syntax-dynamic-import -D
在 .bablerc中引入syntax-dynamic-import插件
{
"presets": ["env"],
"plugins": ["syntax-dynamic-import"]
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于vue实现移动端table表格简单方法的相关资料,使用Vue.js开发移动应用程序时,经常需要使用各种UI组件,其中el-table是一个常用的表格组件,可以方便地展示数据,需要的朋友可以参考下2023-09-09
解决vue项目运行提示Warnings while compiling.警告的问题
这篇文章主要介绍了解决vue项目运行提示Warnings while compiling.警告的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
一个uniapp小程序的项目,我们需要实现一个非常实用的功能——类似于锚点定位的交互效果,即在首页中有多个tab（分类标签）,每个tab对应着不同的模块,当用户点击某个分类的tab时,需要流畅地滚动到对应的内容位置,提供更好的用户体验,2023-10-10
这篇文章主要介绍了前端vue a链接下载文件失败的问题(未发现文件)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了uni-app在线预览pdf文件的相关资料,本文主要介绍了如何在Vue项目中使用PDF.js插件进行PDF文件的预览,包括插件的下载、版本兼容问题的处理,以及在static文件夹下新建pdf文件夹存放解压文件,需要的朋友可以参考下2024-10-10
Vue 中 toRefs() 和 toRef() 的使用方法
在 Vue 3 中,toRefs()可以将响应式对象的属性转换为可响应的 refs,主要用于在解构响应式对象时,保持属性的响应性,这篇文章主要介绍了Vue 中 toRefs() 和 toRef() 的使用,需要的朋友可以参考下2025-01-01
这篇文章主要为大家详细介绍了Vue生命周期和数据共享，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要介绍了解决vue组件销毁之后计时器继续执行的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家详细介绍了vue3使用vuedraggable实现拖拽功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源，这篇文章主要介绍了vue的权限管理的相关知识,需要的朋友可以参考下2022-06-06
最新评论