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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
Jul 31 Javascript
理解JSON:3分钟课程
Oct 28 Javascript
js 代码优化点滴记录
Feb 19 Javascript
jquery使用append(content)方法注意事项分享
Jan 06 Javascript
鼠标经过tr时,改变tr当前背景颜色
Jan 13 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
jquery学习总结(超级详细)
Sep 04 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
Nov 23 Javascript
angular中实现控制器之间传递参数的方式
Apr 24 Javascript
深入剖析Node.js cluster模块
May 23 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
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
PHP与MYSQL中UTF8 中文排序示例代码
2014/10/23 PHP
纯PHP代码实现支付宝批量付款
2015/12/24 PHP
PHP面向对象五大原则之单一职责原则(SRP)详解
2018/04/04 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
JS 实现图片直接下载示例代码
2013/07/22 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
2014/08/22 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
AngularJS入门教程(零):引导程序
2014/12/06 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
vue自动化路由的实现代码
2019/09/30 Javascript
python显示天气预报
2014/03/02 Python
浅谈python中字典append 到list 后值的改变问题
2018/05/04 Python
对python3新增的byte类型详解
2018/12/04 Python
python set集合使用方法解析
2019/11/05 Python
使用keras实现Precise, Recall, F1-socre方式
2020/06/15 Python
django教程如何自学
2020/07/31 Python
Python多分支if语句的使用
2020/09/03 Python
Python实现迪杰斯特拉算法并生成最短路径的示例代码
2020/12/01 Python
基于Python中Remove函数的用法讨论
2020/12/11 Python
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
网页美工求职信
2014/02/15 职场文书
小学生节约用水倡议书
2014/05/15 职场文书
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技