vue-router懒加载的3种方式汇总
更新时间：2021年02月28日 10:29:43 作者：默翟
这篇文章主要给大家介绍了关于vue-router懒加载的3种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
未使用懒加载
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@components/HelloWorld';
Vue.use(Router);
export default new Router({
routes:[
{path:'./',
name:'HelloWorld',
component:HelloWorld
}
]
})
vue异步组件
component:resolve=>{reuqire([‘需要加载的路由地址']),resolve)
import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{require(["@/components/HelloWorld"],resolve}
Vue.use(Router);
export default new Router({
routes:[
{path:'./',
name:'HelloWorld',
component:HelloWorld
}
]
})
ES6的import()
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld=()=>import('@/components/HelloWorld');
Vue.use('Router')
export default new Router({
routes:[{
{path:'./',
name:'HelloWorld',
component:HelloWorld
}
}]
})
webpack的require.ensure()
require.ensure可实现按需加载资源，包括js,css等。他会给里面require的文件单独打包，不会和主文件打包在一起。
第一个参数是数组，表明第二个参数里需要依赖的模块，这些会提前加载。
第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一起，这样就生成了两个chunk,第一次加载时只加载主文件。
第三个参数是错误回调。
第四个参数是单独打包的chunk的文件名
import Vue from 'vue';
import Router from 'vue-router';
const HelloWorld=resolve=>{
require.ensure(['@/components/HelloWorld'],()=>{
resolve(require('@/components/HelloWorld'))
})
}
Vue.use('Router')
export default new Router({
routes:[{
{path:'./',
name:'HelloWorld',
component:HelloWorld
}
}]
})
总结
到此这篇关于vue-router懒加载的3种方式的文章就介绍到这了,更多相关vue-router懒加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于vue3中如何使用codemirror6增加代码提示功能的相关资料,Codemirror是一个不错的Web代码编辑库,可以方便简单的集成,需要的朋友可以参考下2023-08-08
解决vue项目中出现Invalid Host header的问题
这篇文章主要介绍了解决vue项目中出现"Invalid Host header"的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue-element中el-input输入卡顿问题的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家详细介绍了vue增删改查的简单操作，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
Vue中.env、.env.development及.env.production文件说明
这篇文章主要给大家介绍了关于Vue中.env、.env.development及.env.production文件说明的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2022-09-09
vue-router 2.0 跳转之router.push()用法说明
这篇文章主要介绍了vue-router 2.0 跳转之router.push()用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue实现各种文件文档下载及导出示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置）
制作一个折线图用于显示当前24小时的数据，并且可以通过拖动折现图设置数据，接下来通过本文给大家分享vue+echarts实现可拖动节点的折线图（支持拖动方向和上下限的设置），感兴趣的朋友跟随一起学习吧2019-04-04
这篇文章主要为大家详细介绍了vue2手机APP项目添加开屏广告或者闪屏广告的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
如果在template里使用的是ref类型的数据, 那么Vue会自动帮我们添加.value，如果在template里使用的是reactive类型的数据, 那么Vue不会自动帮我们添加.value，这篇文章主要介绍了vue3 中ref和reactive的区别,需要的朋友可以参考下2022-12-12
最新评论