您好,登录后才能下订单哦!
这篇文章主要介绍了Vue中怎么使用import进行路由懒加载的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue中怎么使用import进行路由懒加载文章都会有所收获,下面我们一起来看看吧。
首先我们来说说,import 和 require 的区别
node 编程中最重要的思想就是模块化,import 和 require 都是被模块化所使用。
require
是 AMD规范引入方式
import
是es6的一个语法标准,如果要兼容浏览器的话必须转化成es5的语法
require
是运行时调用,所以require理论上可以运用在代码的任何地方
import
是编译时调用,所以必须放在文件开头
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' }
问题原因:import属于异步引用组件,需要特殊的babel-loader处理
npm i babel-plugin-syntax-dynamic-import -D
在 .bablerc中引入syntax-dynamic-import插件
{ "presets": ["env"], "plugins": ["syntax-dynamic-import"] }
关于“Vue中怎么使用import进行路由懒加载”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue中怎么使用import进行路由懒加载”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。