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 相关文章推荐
jQuery AnythingSlider滑动效果插件
Feb 07 Javascript
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
使用js实现一个可编辑的select下拉列表
Feb 20 Javascript
原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
Jun 21 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
javascript自定义日期比较函数用法示例
Jul 22 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
Apr 30 Vue.js
求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
ajax取消挂起请求的处理方法
2013/03/18 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
php指定长度分割字符串str_split函数用法示例
2017/01/30 PHP
js 动态选中下拉框
2009/11/26 Javascript
javascript 不间断的图片滚动并可点击
2010/01/15 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
JS数组去重与取重的示例代码
2014/01/24 Javascript
jQuery带箭头提示框tooltips插件集锦
2014/11/17 Javascript
JavaScript获取文本框内选中文本的方法
2015/02/20 Javascript
在JavaScript中处理时间之getHours()方法的使用
2015/06/10 Javascript
js判断文本框输入的内容是否为数字
2015/12/23 Javascript
判断JS对象是否拥有某属性的方法推荐
2016/05/12 Javascript
页面get请求 中文参数方法乱码问题的快速解决方法
2016/05/31 Javascript
js仿百度切换皮肤功能(html+css)
2016/07/10 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
js时间控件只显示年月
2017/01/08 Javascript
详解微信小程序 template添加绑定事件
2017/06/23 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
Python 多线程Threading初学教程
2017/08/22 Python
对Python模块导入时全局变量__all__的作用详解
2019/01/11 Python
selenium+python自动化测试之多窗口切换
2019/01/23 Python
Django实现从数据库中获取到的数据转换为dict
2020/03/27 Python
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
自荐信包含哪些内容
2013/10/30 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
公司总经理岗位职责
2015/04/01 职场文书
小学毕业感言100字
2015/07/30 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
CSS 伪元素::marker详解
2021/06/26 HTML / CSS