vue-router懒加载的3种方式汇总


Posted in Vue.js onFebruary 28, 2021

未使用懒加载

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懒加载内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
vue 动态创建组件的两种方法
Dec 31 Vue.js
vue中activated的用法
Jan 03 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
vue实现简单数据双向绑定
Apr 28 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
详细聊聊vue中组件的props属性
Nov 02 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
Vue SPA 首屏优化方案
Feb 26 #Vue.js
vue 动态添加的路由页面刷新时失效的原因及解决方案
Feb 26 #Vue.js
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 #Vue.js
vue中h5端打开app(判断是安卓还是苹果)
Feb 26 #Vue.js
Vue基本指令实例图文讲解
Feb 25 #Vue.js
vue常用高阶函数及综合实例
Feb 25 #Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 #Vue.js
You might like
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
php为字符串前后添加指定数量字符的方法
2015/05/04 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
PHP自定义递归函数实现数组转JSON功能【支持GBK编码】
2018/07/17 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
javascript 混合的构造函数和原型方式,动态原型方式
2009/12/07 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
easyui window refresh 刷新两次的解决方法(推荐)
2016/05/18 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
jquery checkbox的相关操作总结
2016/10/17 Javascript
BootStrap3中模态对话框的使用
2017/01/06 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
react项目如何使用iconfont的方法步骤
2019/03/13 Javascript
详解wepy开发小程序踩过的坑(小结)
2019/05/22 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
2020/07/23 Javascript
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
python实现unicode转中文及转换默认编码的方法
2017/04/29 Python
python实现rsa加密实例详解
2017/07/19 Python
python下载微信公众号相关文章
2019/02/26 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
2020最新pycharm汉化安装(python工程狮亲测有效)
2020/04/26 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
const和static readonly区别
2013/05/20 面试题
我的小天地教学反思
2014/04/30 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
追悼会答谢词
2015/01/05 职场文书
明星邀请函
2015/02/02 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
技术入股协议书
2016/03/22 职场文书