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


  • 2019-09-23 16:17:13

    consola 教程

    consola 和 console 只差一个字母,并且它们都是控制器日志输出的好帮手。console 在某些方面,使用有些局限性。consola 是一个功能更丰富,更漂亮的控制台日志输出控件。今天我们一起来学习它的

  • 2019-09-24 22:03:13

    nginx支持socket

    安装nginx,stream模块默认不安装的,需要手动添加参数:–with-stream,根据自己系统版本选择nginx1.9或以上版本。

  • 2019-09-26 13:25:38

    git合并时冲突<<<<<<< HEAD

    head 到 =======里面的lalala是自己的commit的内容 =========到 >>>>>>里面的hehehe是下拉的内容

  • 2019-09-26 18:57:29

    Java中数组怎么深度复制

    有时候循环进行一些操作,放入list,发现,list中的数据都是一个数据,这就尴尬了,我们需要深度复制,才能解决这个问题。或者生成新的,也就是深度复制。

  • 2019-09-26 19:03:33

    spring post jackson的反序列化需要无参构造函数

    JSON parse error: Cannot construct instance of `com.**` (although at least one Creator exists): cannot deserialize from Object value (no delegate- or property-based Creator); nested exception is com.fasterxml.jackson.databind.exc.MismatchedInputException: Cannot construct instance of `com.**` (although at least one Creator exists): cannot deserialize from Object value (no delegate- or property-based Creator)  at [Source: (PushbackInputStream); line: 2, column: 2]] ———————————————— 版权声明:本文为CSDN博主「冰夏之夜影」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/u011561335/article/details/91346777