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