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

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

最近在做一个企业网站，头部是需要根据后台动态添加的，然后我们肯定是需要根据后台给我们的数据，动态生成头部导航（这个倒是很容易的），然后再动态添加路由，利用的方法是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)