component: resolve =＞ require([‘../pages/home.vue‘], resolve)

component: resolve => require([’…/pages/home.vue’], resolve)
vue 路由的懒加载

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
    
    
  routes: [
    {
    
    
      path: '/',
      component: resolve => require(['../pages/Login.vue'], resolve)
    },

    {
    
    
      path: '/Home',
      component: resolve => require(['../components/Home.vue'], resolve),
      children:[
        {
    
    
          path: '/Info',
          component: resolve => require(['../pages/InfoPage.vue'], resolve)
        },
        {
    
    
          path: '/Consumer',
          component: resolve => require(['../pages/ConsumerPage.vue'], resolve)
        },
        {
    
    
          path: '/Singer',
          component: resolve => require(['../pages/SingerPage.vue'], resolve)
        },
        {
    
    
          path: '/SongList',
          component: resolve => require(['../pages/SongListPage.vue'], resolve)
        },
        {
    
    
          path: '/Song',
          component: resolve => require(['../pages/SongPage.vue'], resolve)
        },
        {
    
    
          path: '/ListSong',
          component: resolve => require(['../pages/ListSongPage.vue'], resolve)
        },
        {
    
    
          path: '/Collect',
          component: resolve => require(['../pages/CollectPage.vue'], resolve)
        },
        {
    
    
          path: '/Comment',
          component: resolve => require(['../pages/CommentPage.vue'], resolve)
        }

      ]
    }
  ]
})

require: 运行时调用，理论上可以运用在代码的任何地方，
import：编译时调用，必须放在文件开头

如果用import引入的话，当项目打包时路由里的所有component都会打包在一个js中，造成进入首页时，需要加载的内容过多，时间相对比较长。
当你用require这种方式引入的时候，会将你的component分别打包成不同的js，加载的时候也是按需加载，只用访问这个路由网址时才会加载这个js。
你可以打包的时候看看目录结构就明白了。