component：(resolve) => require是什么意思

{
  // 進行路由配置,規定'/'引入到home組件
  path: '/',
  component: resolve => require(['../pages/home.vue'], resolve),
  meta: {
    title: 'home'
  }
}]

這是異步加載組件，當你訪問 / ，才會加載 home.vue。

路由懶加載的一種寫法

這樣寫是為了 異步組件

resolve 就是 promise 的 resolve 回調，組件加載成功后調用

因為 webpack 支持多種模塊規范語法 所以有很多方式的異步加載：

 AMD 異步

require(['./a', './b'], function(a, b){
    console.log(a, b)
});

commonjs 異步

require.ensure([], function(require){
    var a = require('./a');
    console.log(a)
});

ES 異步

import('./a').then(a => {
    console.log(a)
})

 

也可以用import

{
  path: '/',
  component: () => import('../pages/home.vue'),
  meta: {
    title: 'home'
  }
}

vue-router中，require代替import解決vue項目首頁加載時間過久的問題

vue的路由配置文件(routers.js)，一般使用import引入的寫法，當項目打包時路由里的所有component都會打包在一個js中，在項目剛進入首頁的時候，就會加載所有的組件，所以導致首頁加載較慢，

而用require會將component分別打包成不同的js，按需加載，訪問此路由時才會加載這個js，所以就避免進入首頁時加載內容過多。

require: 運行時調用，理論上可以運用在代碼的任何地方，
import：編譯時調用，必須放在文件開頭

如果使用import方式，還需要安裝一個插件
https://blog.csdn.net/hong10086/article/details/89684772