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实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
js如何调用qq互联api实现第三方登录
Mar 28 Javascript
jQuery中hasClass()方法用法实例
Jan 06 Javascript
jquery实现右键菜单插件
Mar 29 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
JavaScript设计模式开发中组合模式的使用教程
May 18 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
Jun 07 Javascript
详细聊聊浏览器是如何看闭包的
Nov 11 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
Syphon 秘笈
2021/03/03 冲泡冲煮
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
php+mysqli使用预处理技术进行数据库查询的方法
2015/01/28 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
Nginx实现反向代理
2017/09/20 Servers
laravel框架关于搜索功能的实现
2018/03/15 PHP
js 判断 enter 事件
2009/02/12 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
微信小程序开发之map地图实现教程
2017/06/08 Javascript
javascript基于定时器实现进度条功能实例
2017/10/13 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
vue-cli+webpack项目 修改项目名称的方法
2018/02/28 Javascript
快速解决vue-cli不能初始化webpack模板的问题
2018/03/20 Javascript
Vue项目使用CDN优化首屏加载问题
2018/04/01 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
Flask Web开发入门之文件上传(八)
2018/08/17 Python
树莓派动作捕捉抓拍存储图像脚本
2019/06/22 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
python3 assert 断言的使用详解 (区别于python2)
2019/11/27 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
大学校园毕业自我鉴定
2014/01/15 职场文书
干部考核评语
2014/04/29 职场文书
校长师德师风自我剖析材料
2014/09/29 职场文书
2015年幼师工作总结
2015/04/28 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
css height属性中的calc方法详解
2021/06/03 HTML / CSS