• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >vue > vue2笔记 — vue-router路由懒加载的实现

vue2笔记 — vue-router路由懒加载的实现

作者:HtmlCss3 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含vue2路由,vue2路由传参,vue2,vue2.js,vue2.x等相关知识,HtmlCss3 希望在学习及工作中可以帮助到您

在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)
  }
 ]
})
</div>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

</div>

您可能想查找下面的文章:

  • 详解vue2路由vue-router配置(懒加载)
  • vue2笔记 — vue-router路由懒加载的实现

相关文章

  • 2017-05-30详解vue嵌套路由-query传递参数
  • 2017-05-30vue.js事件处理器是什么
  • 2017-05-30基于vue的下拉刷新指令和滚动刷新指令
  • 2017-05-30干货!教大家如何选择Vue和React
  • 2017-05-30vue.js实现请求数据的方法示例
  • 2017-05-30Vue.js每天必学之内部响应式原理探究
  • 2017-05-30谈谈因Vue.js引发关于getter和setter的思考
  • 2017-05-30用Vue.js实现监听属性的变化
  • 2017-05-30vue模板语法-插值详解
  • 2017-05-30vue组件中点击按钮后修改输入框的状态实例代码

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • vue.js父组件使用外部对象的方法示例
    • 基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
    • windows下vue-cli导入bootstrap样式
    • vue实现todolist单页面应用
    • 基于vue实现多引擎搜索及关键字提示
    • Vue中fragment.js使用方法详解
    • Vue.js使用v-show和v-if的注意事项
    • Vue.js tab实现选项卡切换
    • vue.js实现表格合并示例代码
    • vue数据双向绑定原理解析(get & set)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有