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

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

javascript vue.js vue-router

 阅读约 2 分钟

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