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 相关文章推荐
基于JavaScript 声明全局变量的三种方式详解
May 07 Javascript
无刷新预览所选择的图片示例代码
Apr 02 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
js点击文本框后才加载验证码实例代码
Oct 20 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
Jul 13 Javascript
在微信小程序中渲染HTML内容的方法示例
Sep 28 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
Vue解析剪切板图片并实现发送功能
Feb 04 Javascript
解决Nuxt使用axios跨域问题
Jul 06 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
Jquery Fade用法详解
Nov 06 jQuery
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
UCenter 批量添加用户的php代码
2012/07/17 PHP
php经典算法集锦
2015/11/14 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
alert中断settimeout计时功能
2013/07/26 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
2015/10/30 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
jQuery 跨域访问解决原理案例详解
2016/07/09 Javascript
Jq通过td获取同行其它列td的方法
2016/10/05 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
Vue用v-for给src属性赋值的方法
2018/03/03 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
在Vue中使用icon 字体图标的方法
2019/06/14 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
2019/11/11 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
2019/11/15 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
详细解析Python当中的数据类型和变量
2015/04/25 Python
python 实时遍历日志文件
2016/04/12 Python
python实现获取Ip归属地等信息
2016/08/27 Python
速记Python布尔值
2017/11/09 Python
Tensorflow中使用tfrecord方式读取数据的方法
2018/06/19 Python
jupyter notebook运行命令显示[*](解决办法)
2020/05/18 Python
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
企业厂长岗位职责
2013/12/17 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
施工质量承诺书范文
2014/05/30 职场文书
学校个人对照检查材料
2014/08/26 职场文书
2015年物业公司保洁工作总结
2015/10/22 职场文书
高中英语教学反思范文
2016/03/02 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
golang goroutine顺序输出方式
2021/04/29 Golang
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS