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去空格的正则表达式
Mar 26 Javascript
JavaScript中的数值范围介绍
Dec 29 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
AngularJS实现分页显示数据库信息
Jul 01 Javascript
基于js实现的限制文本框只可以输入数字
Dec 05 Javascript
最好用的Bootstrap fileinput.js文件上传组件
Dec 12 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
Node.js五大应用性能技巧小结(必须收藏)
Aug 09 Javascript
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
基于JavaScript中字符串的match与replace方法(详解)
Dec 04 Javascript
vue+swiper实现侧滑菜单效果
Dec 28 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显示搜索引擎来的关键词
2014/02/13 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
php获取flash尺寸详细数据的方法
2016/11/12 PHP
php微信公众号开发之关键词回复
2018/10/20 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
JavaScript中的排序算法代码
2011/02/22 Javascript
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
javaScript函数中执行C#代码中的函数方法总结
2013/08/07 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
基于jQuery实现网页打印功能
2015/12/01 Javascript
基于JS实现的笛卡尔乘积之商品发布
2016/05/13 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
2017/01/13 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
2020/07/28 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
举例讲解Python中的list列表数据结构用法
2016/03/12 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
Python2与Python3的区别实例总结
2019/04/17 Python
Python3的socket使用方法详解
2020/02/18 Python
Django {{ MEDIA_URL }}无法显示图片的解决方式
2020/04/07 Python
小班评语大全
2014/05/04 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)
2021/04/07 HTML / CSS
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js