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 相关文章推荐
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
整理Javascript基础入门学习笔记
Nov 29 Javascript
完善的jquery处理机制
Feb 21 Javascript
Javascript的表单与验证-非空验证
Mar 18 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
May 30 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
配置一个vue3.0项目的完整步骤
Apr 26 Javascript
JS实现星星海特效
Dec 24 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 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下将XML转换为数组
2010/01/01 PHP
PHP 编写大型网站问题集
2010/05/07 PHP
多个PHP中文字符串截取函数
2013/11/12 PHP
PHP队列用法实例
2014/11/05 PHP
php绘制一个扇形的方法
2015/01/24 PHP
PHP面向对象详解(三)
2015/12/07 PHP
Yii中Model(模型)的创建及使用方法
2015/12/28 PHP
PHP打印输出函数汇总
2016/08/28 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
js 验证密码强弱的小例子
2013/03/21 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
Js nodeType 属性全面解析
2013/11/14 Javascript
SyntaxHighlighter 3.0.83使用笔记
2015/01/26 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
JavaScript检测鼠标移动方向的方法
2015/05/22 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
jQuery插件cxSelect多级联动下拉菜单实例解析
2016/06/24 Javascript
详解JavaScript的变量
2019/04/04 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
python开发之for循环操作实例详解
2015/11/12 Python
Python做简单的字符串匹配详解
2017/03/21 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
EJB实例的生命周期
2016/10/28 面试题
公务员政审个人鉴定
2014/02/25 职场文书
大学开学计划书
2014/04/30 职场文书
民间借贷被告代理词
2015/05/23 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
2019年二手房买卖合同范本
2019/10/14 职场文书
vue3 自定义图片放大器效果的示例代码
2022/07/23 Vue.js