一、基礎寫法，沒有懶載入，打包分離程式碼

官方最基礎的路由寫法

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

二、路由懶載入，import()方法。（按需載入+js打包分離）

官方的一種按需載入的方法，點選的時候才會請求，減少首頁載入時間。

import Vue from 'vue'
import Router from 'vue-router'
const HelloWorld = () => import('@/components/HelloWorld')
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

三、vue的非同步元件，require()方法。（按需載入）

vue的一種按需載入的方法，點選的時候才會請求，減少首頁載入時間。

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

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve => require(['@/components/HelloWorld'], resolve),
    }
  ]
})

四、vue的非同步元件+webpack的ensure()方法。（按需載入+js打包分離

vue的一種按需載入的方法，webpack的ensure()方法實現js打包分離，每個元件單獨打包，載入的時候檔案不會太大。

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

const HelloWorld = r => require.ensure([], () => r(require('@/components/HelloWorld')), 'HelloWorld')

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

五、最優官方，懶載入和打包分離程式碼。（【官方推薦】按需載入+js打包分離

vue官方的一種方法，import()方法和增加webpackChunkName。
動態import()打包出來檔案的name是按照0,1,2...依次排列，如0.js、1.js等，
有的時候我們希望打包出來的檔名是打包前的檔名稱。
相同包名的js，會打包到一起。

1.需要安裝 cnpm i -s @babel/plugin-syntax-dynamic-import
2.配置webpack，在webpack-base-conf.js的output加入chunkFilename: ‘[name].js’

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

Vue.use(Router)

export default new Router({
  routes: [
     {
       path: '/',
       name: 'HelloWorld',
       component: () => import(/* webpackChunkName: "HelloWorld" */ '@/components/HelloWorld')
     }
  ]
})