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"),
    }]
});


  • 2021-04-15 10:07:49

    Chrome屏蔽Your connection is not private

    使用Fiddler时如何屏蔽Chrome的证书警告:"Your connection is not private"/"您的连接不是私密连接"(如图1所示)? 启动chrome的时候加上--ignore-certificate-errors命令行参数(如图2所示)即可。

  • 2021-04-15 10:10:00

    Puppeteer 系列踩坑日志—3—开启支持插件

    在使用puppeteer自动化的过程中,会发现其实开启的chrome往往自动禁用了插件功能,如果我们想在自动化测试的过程中,再去使用一些常用的插件提升效率(偷懒)的话,就行不通了,其实解决办法还是有的,我们今天就来讲解这个问题。

  • 2021-04-15 10:11:17

    Puppeteer拦截修改返回值

    page.setRequestInterception(true)拦截器的使用方法和场景 现附上Puppeteer的Api的链接https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md

  • 2021-04-15 10:32:18

    怎么给 headless chrome添加cookies

    In puppeter you have access to the session cookies through page.cookies(). So once you log in, you could get every cookie and save it in a json file:

  • 2021-04-15 10:51:21

    如何通过Devtools协议拦截和修改Chrome响应数据

    在日常研究中,我们经常碰到大量JavaScript代码,我们首先要深入分析才能了解这些代码的功能及具体逻辑。这些代码代码可能会被恶意注入到页面中,可能是客户送过来需要我们帮忙分析的脚本,也可能是我们的安全团队在网页上找到的引用了我们服务的某些资源。这些脚本通常代码量不大、经过混淆处理,并且我们总是需要经过多层修改才能继续深入分析。

  • 2021-04-19 10:54:39

    block和delegate的区别

    代理 可读性高 大部分可以属性 block 写的代码少 一般作为参数 通知 占用资源