vue实现路由懒加载及组件懒加载的方式


Posted in Javascript onJune 11, 2019

一、为什么要使用路由懒加载

为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题。

二、定义

懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。

三、使用

常用的懒加载方式有两种:即使用vue异步组件 和 ES中的import

1、未用懒加载,vue中路由代码如下

 

  import Vue from 'vue'
        import Router from 'vue-router'
        import HelloWorld from '@/components/HelloWorld'

        Vue.use(Router)

        export default new Router({
         routes: [
          {
           path: '/',
           name: 'HelloWorld',
           component:HelloWorld
          }
         ]
        })

2、vue异步组件实现懒加载

方法如下:component:resolve=>(require(['需要加载的路由的地址']),resolve)

import Vue from 'vue'
import Router from 'vue-router'
/* 此处省去之前导入的HelloWorld模块 */
Vue.use(Router)

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: resolve=>(require(["@/components/HelloWorld"],resolve))
  }
 ]
})

3、ES 提出的import方法,(------最常用------)

方法如下:const HelloWorld = ()=>import('需要加载的模块地址')

(不加 { } ,表示直接return)

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const HelloWorld = ()=>import("@/components/HelloWorld")
export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component:HelloWorld
  }
 ]
})

四、组件懒加载

 相同与路由懒加载,

1、原来组件中写法

<template>
 <div class="hello">
 <One-com></One-com>
 1111
 </div>
</template>

<script>
import One from './one'
export default {
 components:{
  "One-com":One
 },
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 }
}
</script>

2、const方法

<template>
 <div class="hello">
 <One-com></One-com>
 1111
 </div>
</template>

<script>
const One = ()=>import("./one");
export default {
 components:{
  "One-com":One
 },
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 }
}
</script>

3、异步方法

<template>
 <div class="hello">
 <One-com></One-com>
 1111
 </div>
</template>

<script>
export default {
 components:{
  "One-com":resolve=>(['./one'],resolve)
 },
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 }
}
</script>

五、总结:

路由和组件的常用两种懒加载方式:

1、vue异步组件实现路由懒加载

component:resolve=>(['需要加载的路由的地址',resolve])

2、es提出的import(推荐使用这种方式)

const HelloWorld = ()=>import('需要加载的模块地址')

总结

以上所述是小编给大家介绍的vue实现路由懒加载及组件懒加载的方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JS在IE和FireFox之间常用函数的区别小结
Mar 12 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
Nov 03 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
react用Redux中央仓库实现一个todolist
Sep 29 Javascript
如何利用JavaScript实现二叉搜索树
Apr 02 Javascript
Vue+element 解决浏览器自动填充记住的账号密码问题
Jun 11 #Javascript
Flutter部件内部状态管理小结之实现Vue的v-model功能
Jun 11 #Javascript
JavaScript动态检测密码强度原理及实现方法详解
Jun 11 #Javascript
聊聊Vue 中 title 的动态修改问题
Jun 11 #Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 #Javascript
vue.js中导出Excel表格的案例分析
Jun 11 #Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 #Javascript
You might like
php 图像函数大举例(非原创)
2009/06/20 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
配置php.ini实现PHP文件上传功能
2014/11/27 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
php格式化json函数示例代码
2016/05/12 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
CSS3画一个阴阳八卦图
2021/03/09 HTML / CSS
表单提交验证类
2006/07/14 Javascript
初学JavaScript_03(ExtJs Grid的简单使用)
2008/10/02 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
让innerText在firefox火狐和IE浏览器都能用的写法
2011/05/14 Javascript
jquery绑定事件不生效的解决方法
2014/02/11 Javascript
基于jquery实现人物头像跟随鼠标转动
2015/08/23 Javascript
js控制多图左右滚动切换效果代码分享
2015/08/26 Javascript
js实现下一页页码效果
2017/03/07 Javascript
vue按需引入element Transfer 穿梭框
2017/09/30 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
Vue实现todo应用的示例
2021/02/20 Vue.js
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
python实现微信自动回复功能
2018/04/11 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
python点击鼠标获取坐标(Graphics)
2019/08/10 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
印度首个本地在线平台:nearbuy
2019/03/28 全球购物
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
Servlet都有哪些方法?主要作用是什么?
2014/03/04 面试题
会计专业自我鉴定范文
2013/10/06 职场文书
小学生植树节活动总结
2014/07/04 职场文书
销售竞赛活动方案
2014/08/23 职场文书
入党积极分子群众意见
2015/06/01 职场文书
CSS SandBox应用场景及常见问题
2022/06/25 HTML / CSS