关于动态添加路由的一个很大坑，也是一个很小的坑，这是对我来说，是一个非常重要的，重要的，一定要记住；

首先我非常感谢知乎的一个叫做‘王欢’ 的作者，一句话就点明了

最近在做一个企业网站，头部是需要根据后台动态添加的，然后我们肯定是需要根据后台给我们的数据，动态生成头部导航（这个倒是很容易的），然后再动态添加路由，利用的方法是vm.$router.addRouters()【不明白怎么用的可以去官网看一下】，

参数是，一个数组，这个是数组和路由配置里的routes里的是需要一样的数组；

还记得我们是怎么配置路由的吗？

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import home from '@/views/home'

var router = new VueRouter({
  base: '/app/',
  mode: 'history',
  routes: [
    {
      path: '/',
      component: home
    }
  ]
})

export default router

对，我们需要先用import导入组件，一个数组对应一个组件的，这在写死的情况下很容易的；

但是如果我们用 vm.$router.addRoutes()这个方法的时候，你想过里面的参数要怎么写吗？

像这样?

vm.$router.addRoutes([
    {
      path: '/',
      component: home
    }
  ])

这样肯定是不靠谱的，因为后台返回给我们的数据是这样的

[
    {
      path: '/',
      component: '路径，注意这里是字符串的'
    }
  ]

你看到了，component后面跟着的是字符串的，对，你无法用变量的；

所幸的是，vue-router里提供了动态加载组件的方法，比如：compoent选项后面其实是可以跟一个函数的，比如

[
  path: '/',
  component: require.ensure([], (require) => {
      resolve(require('@/views/home.vue'))
    })
]

看到这里，你会说，那还不容易吗，到时候后台返回字符串路径给我就好了，我直接写一个函数，传进去字符串好了；比如这样

function getViews(path) {
  return resolve => {
    require.ensure([], (require) => {
      resolve(require(url))
    })
  }
}

然后循环数组就好了，然而你这么做了以后，你会发现，vue就会一直报错，对的就是一直报错；

但其实这里需要注意一点，

require.ensure里面的require不可以用变量，使用了拼接方法可以解决

如下

function getViews(path) {
  return resolve => {
    require.ensure([], (require) => {
      resolve(require('@/views/' + path + '.vue'))
    })
  }
}

经过试验，其实

resolve => require([path],resolve)

这个path也不能用变量，也需要是拼接的

resolve => require(['@/views/' + routes[i].componentName + '.vue'],resolve)