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小技巧
Jul 21 Javascript
javascript StringBuilder类实现
Dec 22 Javascript
js有关元素内容操作小结
Dec 20 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
JS二维数组的定义说明
Mar 03 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
JavaScript的模块化开发框架Sea.js上手指南
May 12 Javascript
浅谈vuejs实现数据驱动视图原理
Feb 23 Javascript
vue input 输入校验字母数字组合且长度小于30的实现代码
May 16 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 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
收音机术语解释
2021/03/01 无线电
咖啡语言
2021/03/03 咖啡文化
解析php中用PHPMailer来发送邮件的示例(126.com的例子)
2013/06/24 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
jQuery中map函数的两种方式
2017/04/07 jQuery
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
JS实现简单打字测试
2020/06/24 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
Django中的CACHE_BACKEND参数和站点级Cache设置
2015/07/23 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
杭州信雅达系统.NET工程师面试试题
2015/02/08 面试题
工厂厂长的职责
2013/12/12 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
个人廉政承诺书
2015/04/28 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
驾驶员管理制度范本
2015/08/06 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
2016党校学习心得体会范文
2016/01/07 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
Java十分钟精通进阶适配器模式
2022/04/06 Java/Android
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS