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