vue之router路由最優美寫法，懶加載、打包代碼分離。

一、基礎寫法，沒有懶加載，打包分離代碼

官方最基礎的路由寫法

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()方法。（按需加載）

官方的一種按需加載的方法，點擊的時候纔會請求，減少首頁加載時間。

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。
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')
     }
  ]
})

寫的比較匆忙，有不對的請指出，沒有用嵌套路由children，compontent寫法也各不一樣。