东营企业网站建设/郑州网站建设制作

搞了一天的element-ui，vue-router，把侧栏的导航菜单搞了出来后，试着在菜单上加入链接，研究了下官方提供的文档，发现要使用vue-route。

在项目中安装好vue-route， 对照vue-router的文档及网上的例子，在项目中加入了路由功能，搞了一天，试了无数次,链接一直无效！！！

项目起始页 index.html 代码

 <div id="mainApp"><h1>Hello App!</h1><p><router-link to="/">Go to Index</router-link><router-link to="/users">Go to Users</router-link></p><router-view></router-view></div>

在main.js中这样配置正常： 

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

Vue.use(VueRouter);const Index = { template: '<div>Index</div>' }
const User = { template: '<div>User</div>' }
const routes = [{ path: '/', component: Index },{ path: '/users', component: User }
]const router = new VueRouter({routes
})
console.log(routes);

const app = new Vue({router
}).$mount('#mainApp')

点击链接显示文字：

把路由路径独立出来放在单独的文件夹中，路由就不起作用：

//main.js
import Vue from 'vue'
import VueRouter from "vue-router";
import RoutesMap from './routes/'Vue.use(VueRouter);const router = new VueRouter({RoutesMap
})
console.log(RoutesMap);const app = new Vue({router
}).$mount('#mainApp')

//  routes/index.js
const Index = { template: '<div>Index</div>' }
const User = { template: '<div>User</div>' }const routes = [{ path: '/', component: Index },{ path: '/users', component: User }
]export default routes

点击链接没有动静，还没法调试：

真要吐血了。。。

 

2016年11月25日15:25:23 路由问题已解决：

 

//main.js
import Vue from 'vue'
import VueRouter from "vue-router";
import RoutesMap from './routes/'Vue.use(VueRouter);//需要使用一个具名数组
const router = new VueRouter({routes: RoutesMap
})
console.log(RoutesMap);const app = new Vue({router
}).$mount('#mainApp')