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 相关文章推荐
JavaScript Date对象使用总结
May 14 Javascript
拥抱模块化的JavaScript
Mar 07 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 Javascript
javascript事件函数中获得事件源的两种不错方法
Mar 17 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
JS实现简单抖动效果
Jun 01 Javascript
Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码
Nov 15 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
原生JS实现飞机大战小游戏
Jun 09 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 simple_html_dom.php+正则 采集文章代码
2009/12/24 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
Javascript仿京东放大镜的效果
2017/03/01 Javascript
JS和canvas实现俄罗斯方块
2017/03/14 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
详解Vue 事件修饰符capture 的使用
2017/12/29 Javascript
Angular4学习教程之HTML属性绑定的方法
2018/01/04 Javascript
vue权限管理系统的实现代码
2019/01/17 Javascript
微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
2019/02/21 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
python 实现判断ip连通性的方法总结
2018/04/22 Python
用python求一个数组的和与平均值的实现方法
2019/06/29 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
详解python中的time和datetime的常用方法
2019/07/08 Python
numpy.array 操作使用简单总结
2019/11/08 Python
python add_argument()用法解析
2020/01/29 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
python PIL模块的基本使用
2020/09/29 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
比利时香水网上商店:NOTINO
2018/03/28 全球购物
酒店中秋节促销方案
2014/01/30 职场文书
期末自我鉴定
2014/02/02 职场文书
天地会口号
2014/06/17 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
教师求职自荐信
2015/03/26 职场文书
永不妥协观后感
2015/06/10 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书
Apache POI的基本使用详解
2021/11/07 Servers
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL