vue2笔记 — vue-router路由懒加载的实现


Posted in Javascript onMarch 03, 2017

在Web应用程序中,系统的瓶颈常在于系统的响应速度。如果系统响应速度过慢,用户就会出现埋怨情绪,系统的价值也因此会大打折扣。因此,提高系统响应速度,是非常重要的。

懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。

用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效,实现代码如下:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
 routes: [
  {
   path: '/',
   component: resolve => require(['components/Hello.vue'], resolve)
  },
  {
    path: '/about',
    component: resolve => require(['components/About.vue'], resolve)
  }
 ]
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS声明变量背后的编译原理剖析
Dec 28 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
禁止iframe脚本弹出的窗口覆盖了父窗口的方法
Sep 06 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
js数组常用最重要的方法
Feb 04 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
详解Vue源码之数据的代理访问
Dec 11 Javascript
Openlayers实现图形绘制
Sep 28 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 Javascript
如何在现代JavaScript中编写异步任务
Jan 31 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 #Javascript
jQuery控制元素隐藏和显示
Mar 03 #Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 #Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 #Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 #Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 #Javascript
js实现二级导航功能
Mar 03 #Javascript
You might like
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
CI框架(ajax分页,全选,反选,不选,批量删除)完整代码详解
2016/11/01 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
PHP的垃圾回收机制代码实例讲解
2021/02/27 PHP
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
js注意img图片的onerror事件的分析
2011/01/01 Javascript
js中如何复制一个对象并获取其所有属性和属性对应的值
2013/10/24 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
关于jquery中attr()和prop()方法的区别
2018/05/28 jQuery
vue实现未登录跳转到登录页面的方法
2018/07/17 Javascript
获取layer.open弹出层的返回值方法
2018/08/20 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
2019/02/21 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
js+canvas实现图片格式webp/png/jpeg在线转换
2020/08/22 Javascript
vue中jsonp插件的使用方法示例
2020/09/10 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
印尼最大的在线购物网站:MatahariMall.com
2016/08/26 全球购物
人事主管岗位职责范本
2013/12/04 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
预备党员期盼十八届四中全会召开思想汇报
2014/10/17 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
机器人总动员观后感
2015/06/09 职场文书
用Python远程登陆服务器的步骤
2021/04/16 Python
python编程实现清理微信重复缓存文件
2021/11/01 Python