vux2中路由的问题

Question

用vue-cli创建了vux的模板以后，看到根目录main.js里面包含路由信息，router文件夹下的index.js 也有路由信息。npm run dev 发现起作用的是 main.js下的路由。

想请教一下，router文件夹下的index.js 是不是没有作用，如果要增加路由是不是只用修改 main.js里面的代码就可以了？这个router下的index.js 有什么用途呢？

main.js里面代码如下：

import Vue from 'vue'
import FastClick from 'fastclick'
import VueRouter from 'vue-router'
import App from './App'
import Home from './components/HelloFromVux'

Vue.use(VueRouter)

const routes = [{
  path: '/',
  component: Home
}]

const router = new VueRouter({
  routes
})

FastClick.attach(document.body)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(App)
}).$mount('#app-box')

router文件夹下index.js 代码如下：

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    }
  ]
})

看的有点懵，这个index.js 不起作用，作者给生成这个干嘛用的呢？ 直接在main.js里面修改不就可以了么？

请大神详解一下！

Answer 1

题主，首先router下面的index.js是进行路由配置的。你可以这样写

import Home from './components/HelloFromVux'
import xxx from './components/xx.vue'
export default [{
    path: '/',
      name: 'Hello',
      component: Hello
},
{
  path: '/home',
  component: Home
}
]

然后在main.js里面通过es6里面的import引入这个模板，并进行路由的设置

import routes from "xxx/router/index";
const router = new VueRouter({
    mode: 'history',
    scorllBehavior: () => ({
        y: 0

    }),
    routes
});

你上面的main.js里面已经对路由进行了配置

Vue.use(VueRouter)

const routes = [{
  path: '/',
  component: Home
}]

const router = new VueRouter({
  routes
})

这是你的代码，而且你也没有引入router下面的index.js所以，你在router的index.js里面配置的Hello组件的路由是不生效的

Answer 2

有没有大神指点一下啊

Answer 3

在index.js下去配置路由。通过export 将routes暴露出来，然后在main.js里使用import语句引入routes
再这样new VueRouter({routes})
而你上面的main.js中已经定义了一个routes,当然会用main.js里的啦

Answer 4

同问题主，我也遇到了这个问题，一模一样的。但是按照大佬的方式，并没有解决问题，控制台报错：

请问如何解决啊