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定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
Javascript类型系统之String字符串类型详解
Jun 21 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
通过BootStrap-select插件 js jQuery控制select属性变化
Jan 03 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
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 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
php jquery 多文件上传简单实例
2013/12/23 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
PHP用正则匹配form表单中所有元素的类型和属性值实例代码
2017/02/28 PHP
js表头排序实现方法
2015/01/16 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
jQuery用FormData实现文件上传的方法
2016/11/21 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
bootstrap table sum总数量统计实现方法
2017/10/29 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
2020/07/09 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
python多重继承实例
2014/10/11 Python
Python使用django搭建web开发环境
2017/06/09 Python
Python编程实现微信企业号文本消息推送功能示例
2017/08/21 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
python实现词法分析器
2019/01/31 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
Django 开发环境配置过程详解
2019/07/18 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
css3学习系列之移动属性详解
2017/07/04 HTML / CSS
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
工业自动化专业毕业生推荐信
2013/11/18 职场文书
教师个人剖析材料
2014/02/05 职场文书
文化与传播毕业生求职信
2014/03/09 职场文书
法制宣传月活动总结
2014/04/29 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
小学中等生评语
2014/12/29 职场文书
文明倡议书
2015/01/19 职场文书
退休欢送会主持词
2015/07/01 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
2017年寒假社区服务活动总结
2016/04/06 职场文书
史上最全书信经典范文大全(建议收藏)
2019/07/10 职场文书
Django框架中表单的用法
2022/06/10 Python