Vue + vue-router

搞了一天的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')