Vue-router引入路由文件问题

Vue-router引入路由文件问题

router文件下面有一个index.js文件，里面可以写我们需要访问的路由。但是当项目被拓展之后，为每个子项目单独写一个路由配置文件是必要的。
增加子文件：xxx.js

const router= [{……},{……}]
export default router

但是在index.js文件中引用的时候，直接import后添加到routes: []中无法正确的导航到相应页面。

import xxx from './xxx'

export default new Router({
  routes: [
  	{……},
     xxx
  ]
})

原因是这样的引入方式，是将xxx.js中，export 的代码段，直接加到index.js中的对应片段中了。等效于：

 export default new Router({
  routes: [
  	{……},
    [{……},{……}]
  ]
})

xxx是一个array，而不是一个object。
在xxx前前面加一个es6拓展运算符可以解决。

import xxx from './xxx'

export default new Router({
  routes: [
  	{……},
     ...xxx
  ]
})

es6拓展运算符

对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

关于拓展运算符的细节： es6拓展运算符