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 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
js移除事件 js绑定事件实例应用
Nov 28 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
Jquery轮播效果实现过程解析
Mar 30 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
js微信支付实现代码
Dec 22 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
浅析Vue自定义组件的v-model
Nov 26 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
利用Memcached在php下实现session机制 替换PHP的原生session支持
2010/08/21 PHP
PHP实现根据密码长度显示安全条
2017/07/04 PHP
PHP 8新特性简介
2020/08/18 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
2013/03/05 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
详解VUE中v-bind的基本用法
2017/07/13 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
nodejs基于express实现文件上传的方法
2018/03/19 NodeJs
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
基于纯JS实现多张图片的懒加载Lazy过程解析
2019/10/14 Javascript
js判断鼠标移入移出方向的方法
2020/06/24 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
python获取从命令行输入数字的方法
2015/04/29 Python
python读写二进制文件的方法
2015/05/09 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
在Python web中实现验证码图片代码分享
2017/11/09 Python
Python 创建TCP服务器的方法
2020/07/28 Python
Python 在 VSCode 中使用 IPython Kernel 的方法详解
2020/09/05 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
瑰珀翠美国官网:Crabtree & Evelyn美国
2016/11/29 全球购物
Delphi CS笔试题
2014/01/04 面试题
临床医学系毕业生推荐信
2013/11/09 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
优秀班主任先进事迹材料
2014/12/16 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
七年级作文之环保作文
2019/10/17 职场文书
python字典的元素访问实例详解
2021/07/21 Python
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL
Docker下安装Oracle19c
2022/04/13 Servers