vue路由的異步加載(懶加載)方法。

vue自己很少介紹。直接說問題,由於vue的全部路由都是加載在一個app.js裏的,若是項目巨大,那麼首頁加載會是災難。因此咱們就須要把某些路由用異步加載(懶加載)的方式進行加載.vue

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"),
    }]
});
相關文章
相關標籤/搜索