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-01-08 16:54:08

    如何在 Node.js 中使用 import / export 的三种方法

    注:第1、2种方法均是借助 babel,需要注意的是文章使用的babel版本 < 7。从 babel 7.X 版本开始,部分包名、用法发生了些许变化,大体与7之前的用法类似,详细请到官方手册学习 7.X 版本的改动(Babel 踩坑总结(三) —— 7.X 版本升级是我对 7.X 版本三大改动的总结)

  • 2021-01-10 17:19:00

    libc++_shared是什么冲突

    NDK 支持多种 C++ 运行时库。本文档介绍了这些库的相关信息、所涉及的折衷做法以及库的使用方法。

  • 2021-01-10 17:20:52

    NDK--CMakeLists配置第三方so库

    当我们创建一个NDK工程时,会自动创建一个CMakeLists.txt的文件,在AS中c++的编译器是使用LLVM,规则为cmake,今天来学习下cmake的基本套路 首先,我创建了两个NDK工程,第一个工程为lib,为第二个工程提供so库

  • 2021-01-12 10:56:09

    NodeJS封装mongodb

    NodeJS操作 Mongodb 并且对 Mongodb 类库进行封装