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 相关文章推荐
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
Vue-router编程式导航的两种实现代码
Mar 04 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
vue3中的组件间通信
Mar 31 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
浅谈Vue的computed计算属性
Mar 21 Vue.js
vue动态绑定style样式
Apr 20 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脚本的10个技巧(7)
2006/10/09 PHP
用文本文件制作留言板提示(上)
2006/10/09 PHP
PHP form 表单传参明细研究
2009/07/17 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
用Jquery选择器计算table中的某一列某一行的合计
2014/08/13 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
jQuery实现的经典滑动门效果
2015/09/22 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
JavaScript学习笔记整理_用于模式匹配的String方法
2016/09/19 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
javascript 模块依赖管理的本质深入详解
2020/04/30 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
10款最好的Web开发的 Python 框架
2015/03/18 Python
玩转python爬虫之正则表达式
2016/02/17 Python
利用Python如何生成便签图片详解
2018/07/09 Python
python3.6环境安装+pip环境配置教程图文详解
2019/06/20 Python
python 实现屏幕录制示例
2019/12/23 Python
解析Tensorflow之MNIST的使用
2020/06/30 Python
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
管理学专业个人求职信范文
2013/09/21 职场文书
学校后勤岗位职责
2014/02/19 职场文书
高中军训感言200字
2014/02/23 职场文书
超市开学活动方案
2014/03/01 职场文书
机械专业毕业生自我鉴定2014
2014/10/04 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
2014离婚协议书范文(3篇)
2014/11/29 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
司考复习计划
2015/01/19 职场文书