vue-router 2.0路由配置问题

Question

问题描述

我想通过import引入文件方式，来设置路由，代码如下，结构已经加载出来了，首页没有渲染，点击路由也没有渲染，之前1.X是通过router.map来实现的，2.0以后map这个API去掉了，但我这种方式也不行，求指点

main.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import routerMap from './router'
import App from './App'

Vue.config.debug = true
Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  base: __dirname
});
routerMap(router);
const app = new Vue({
  router: router,
  render: h => h(App)
}).$mount('#app')

router.js

import index from './view/index'
import first from './view/first'
import second from './view/second'

export default function(router){
  const routes = [{
        name:'/',
        path:'/',
        component:index
      },{
        name:'first',
        path:'/first',
        component:first
      },{
        name:'second',
        path:'/second',
        component:second
      }
    ]
    router.options.routes = routes;
}

截图

修改过后

之前router.js按照1.x版本写了，现在改成2.x版本语法，还是同样不渲染

Answer 1

routers.js

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

import Index from './components/Index'
import First from './components/First'
import Second from './components/Second'

Vue.use(VueRouter)

const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
        { path: '/', name: '/', component: Index },
        { path: '/first', name: 'first', component: First },
        { path: '/second', name: 'second', component: Second }
    ]
})

export default router

main.js

import Vue from 'vue'
import App from './App'

import router from './routers'

new Vue({
    el: '#app',
    router,
    render: h => h(App)
}).$mount('#app')

Answer 2

这明显语法都不对吧。。。2.x的routes接收的就是多个对象，你怎么还是写在一个对象里的，看一下官方文档的写法。

更新一下:
自己都说是数组了，但你贴的图打印出来的那个routes明显是个Object。正确的应该是包含多个Object的Array。