Vue2.0較Vue1.0，路由有了較大改變。看一下Vue2.0中的路由如何配置：
步驟一：
在main.js文件中引入相關(guān)模塊以及組件及實例化vue對象配置選項路由及渲染App組件
默認設(shè)置如下：
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({?
? el: '#app',?
? router,?
? template: '<App/>',?
? components: { App }
})
如果你有其他需要的css、js文件可以在這里用require和import來添加，建議require使路徑用絕對路徑，import使用相對路徑。
自定義設(shè)置：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App'
import router from './router' //這里引入的是router目錄，會默認識別里面的index.js文件（不能是其他名字）
import VueResource from 'vue-resource' ? ? ?//引入vue-resource網(wǎng)絡(luò)請求模塊
Vue.use(VueResource) ? ? ?//使用vue-resource網(wǎng)絡(luò)請求模塊
Vue.use(ElementUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
//實例化vue對象配置選項路由及渲染App組件
new Vue({
? el: '#app',? //這里綁定的是index.html中的id為app的div元素
? router,
? render: h => h(App)
//這里的render: h => h(App)是es6的寫法?
//轉(zhuǎn)換過來就是：? 暫且可理解為是渲染App組件
// ?render:(function(h){
// ? ?return h(App);
// ?});
});
步驟二：App.vue文件是我們的組件入口，寫入組件
1.使用 router-link 組件來導(dǎo)航；
2.通過傳入‘to’ 屬性指定鏈接(與router/index.js的path屬性相一致)；
3. router-link 默認會被渲染成一個 <a>標(biāo)簽；
4.路由匹配到的組件將渲染在 router-view 中。
步驟三：在router/index.js文件中創(chuàng)建路由并配置路由映射 ，并通過export輸出router到main.js文件中
1.mode設(shè)置為history表示利用了history.pushState API來完成URL跳轉(zhuǎn)而無須重新加載頁面。
扯遠一點，mode有三種模式如下：
I) hash模式:使用URL hash值來作為路由。支持所有瀏覽器。
II) history模式：依賴HTML5 History API和服務(wù)器配置。查看HTML5 History模式。
III) abstract模式:支持所有JavaScript運行環(huán)境，如Node.js服務(wù)器端。如果發(fā)現(xiàn)沒有瀏覽器的API，路由會自動強制進入這個模式。
2.scrollBehavior 設(shè)置了滾動條起始位置。
3.linkActiveClass 設(shè)置當(dāng)前選中項的樣式類名
4.最重要的是routes(注意：不是routers，沒有r)
(1) path 就是 router-link to后面跟的鏈接，注意保持一致；
(2) component 對應(yīng)的組件，常見有兩種寫法：第一種如上圖。第二種如下：
(3) redirect是指重定向，將根路徑重定向到指定路徑。
步驟四：完成相應(yīng)組件即可，如下圖：
