webpack支持amd、commonJS、es6這三種模塊語法，因此vue實現動態路有3種方式：

1. 使用AMD規范的require語法

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: resolve => require(['../views/About.vue'], resolve)
  },
]

這種語法不能指定模塊的名稱，默認使用webpack配置中output.chunkFileName。

2. 使用commonJS規范的require.ensure語法

require.ensure() 是 webpack 特有的，已經被 import() 取代。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
     component: resolve => require.ensure([], () => resolve(
      require('@/' + about + '.vue')
    ), 'about')
  },
]

此語法和下面的import語法均可以指定模塊名稱

3. 使用ES6原生的import語法

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
]

這種是vue-cli3默認使用的方式。

以上三種方式，如果路徑參數中都包含變量，webpack打包就會出現問題。

1. import()會將該組件所在的目錄內的所有組件都引入進來。

const about = 'views/About'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ `../${about}.vue`)
  },
]

這樣會將views目錄下的所有組件都進行打包，即使沒有在路由中沒有配置。
因此wbepackChunkName指定的文件名也會有所改變，上面的About頁面組件會打包成about1、about2類似的名稱。
如果后續的路由配置中的路徑參數也帶有變量，那不管你指定什么webpackChunkName，打包出來的都是按照第一個import指定的webpackChunkName。例如：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ `../${about}.vue`) // 打包成about2.js
  },
  {
    path: '/test',
    name: 'Test',
    component: () => import(/* webpackChunkName: "test" */ `../${test}.vue`) // 最終打包成 about3.js 這樣的文件名，而不是test.js
  },

2. require()和require.ensure則會將所有帶上變量的路由組件打包為一個js

let home = 'views/Home'
let about = 'views/About'
let test = 'views/Test'
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: resolve => require(['../' + about + '.vue'], resolve)
  },
  {
    path: '/test',
    name: 'Test',
    component: resolve => require(['../' + test + '.vue'], resolve)
  },

about頁面組件和test頁面組件會被打包進同一個js文件。

所以盡量不要在路徑參數中帶上變量。