vue路由的异步加载(懒加载)方法

2020-01-13 21:01:04

参考链接 vue路由的异步加载(懒加载)方法

vue本身不多介绍。直接说问题,因为vue的所有路由都是加载在一个app.js里的,如果项目巨大,那么首页加载会是灾难。所以我们就需要把某些路由用异步加载(懒加载)的方式进行加载.

1.先来看正常的加载方式

import Login from "@/components/pages/signIn/signIn";export default new Router({  routes: [ {
      path: '/login',
      component: Login,
    }]
});

2.下面是第一种异步加载方法

export default new Router({  routes: [ {
      path: '/login',
      component: resolve=>require(["@/components/pages/signIn/signIn"],resolve),
    }]
});

3.下面是第二种异步加载方法(因为我们公司的项目整个就是用vue结合webpack的方式搭建的。所以这个方法直接使用是没问题的。如果只是部分的界面使用vue的,可能试一下才能确定能不能用,可能要考虑import能否支持(转化)的问题,毕竟这是ES6新特性)

export default new Router({
  routes: [ {
      path: '/login',
      component: ()=>import("@/components/pages/signIn/signIn"),
    }]
});


  • 2020-12-17 11:00:37

    H5流式播放(FMP4转封装与mediaSource)

    W3C上有明确关于mediaSource 扩展接口的文档。mediaSource 扩展文档中是这么定义的, 它允许JS脚本动态构建媒体流用于和,允许JS传送媒体块到H5媒体元素。这种接口的应用可以让h5播放器实现持续添加数据进行播放。做as的朋友都知道as中的appendBytes方法,一种添加二进制数据进行播放的方式。这两种接口在概念上是类似的。只是里面的定义和对媒体文件的要求有所不同。对于mediaSource扩展接口我只介绍我们主要应用的几个。

  • 2020-12-18 17:15:29

    coTurn stun服务器搭建,禁用turn

    https://github.com/coturn/coturn 在这里git clone 下来然后编译安装,一切默认即可。编译后,也可以不用安装。在编译目录下bin文件夹下有turnserver turnutils_stunclient turnutils_uclient 这三个等一下会用到的软件。

  • 2020-12-18 17:26:25

    coturn配置文件详细解释

    Coturn 是webrtc,p2p视频通话必不少的,主要包含2个主要功能stun服务, turn服务 Coturn 的githup地址为 https://github.com/coturn/coturn/

  • 2020-12-21 06:26:16

    为UIView添加点击事件

    最近经常碰到要将UIImageView和UILabel看成整体的情况,我于是就将他俩用UIView包起来,那么怎么给一个UIView添加点击事件,可以这么实现:

  • 2020-12-21 09:00:20

    Window.matchMedia() 方法详解

    matchMedia() 返回一个新的 MediaQueryList 对象,表示指定的媒体查询字符串解析后的结果。 matchMedia() 方法的值可以是任何一个 CSS @media 规则 的特性, 如 min-height, min-width, orientation 等。 MediaQueryList 对象有以下两个属性:

  • 2020-12-21 09:42:42

    iframe.contentWindow 操作iframe

    注:iframe.contentWindow这里,返回的是iframe的window对象,所以后面可以接着调用document方法,再接着调用getElementByTagName。那么就可以对iframe里面的元素进行操作了。