對於單頁應用，官方提供了vue-router進行路由跳轉的處理，本篇主要也是基於其官方文件寫作而成。

安裝

基於傳統，我更喜歡採用npm包的形式進行安裝。

npm install vue-router --save

當然，官方採用了多種方式進行安裝，包括bower,cdn等。

基本用法

在HTML文件中使用，只需要利用v-link這個directive就行了，如：

<a v-link="{path: '/view-a'}">Go to view-a</a>

ps: v-link還支援activeClass用於指定連結活躍時的css樣式。replace屬性為true的時候可以讓連結在跳轉的時候不會留下歷史記錄。

而在ES5中使用，需要先建立路由器例項，隨後傳入配置引數即可，如：

var router = new VueRouter();

router.map({
'/view-a': {
component: ViewA
},
'/view-b': {
component: ViewB
}
});

router.start(App,'#app');

以上定義的路由器規則，採用對映到一個元件的方式，最後啟動應用的時候，掛載到#app的元素上。

當然，如果你想採用ES6的語法進行配置，也是很容易做到的:

先建立一個路由器模組，主要進行配置和繫結相關資訊

import Vue from 'vue';

import VueRouter from 'vue-router';

Vue.use(VueRouter);

const router = new VueRouter(); //這裡可以帶有路由器的配置引數

router.map({
'/view-a': {
component: ViewA
},
'/view-b': {
component: ViewB
}
});

export default router; //將路由器匯出

在app.js入口啟動檔案中啟用該路由器

import Vue from 'vue';
import router from './routers';

router.start(App,'#app');

巢狀路由

如果想要使用巢狀路由，如/a/b則可以更新路由配置

router.map({
'/a': {
component: A,
subRoutes: {
'/b': {
component: B
}
}
}
});

同時，你需要在元件A和元件B中使用<router-view>，如：

<div id="app">
<router-view></router-view>
</div>

元件A中，使用巢狀的外鏈

<div id="A">
<h1>
This is component A
</h1>
<router-view></router-view>
</div>

路由器將自動渲染對應的元件以及更新路由資訊。

其中<router-view>可以傳遞props，支援v-ref,同時也可以使用v-transition和transition-mode來獲得場景切換效果，被渲染的元件將註冊到父級元件的this.$物件上。

路由物件和路由匹配

路由物件，即$router會被注入每個元件中，可以利用它進行一些資訊的獲取。如

屬性	說明
$route.path	當前路由物件的路徑，如'/view/a'
$rotue.params	關於動態片段（如/user/:username)的鍵值對資訊,如{username: 'paolino'}
$route.query	請求引數，如/foo?user=1獲取到query.user = 1
$route.router	所屬路由器以及所屬元件資訊
$route.matched	陣列，包含當前匹配的路徑中所包含的所有片段所對應的配置引數物件。
$route.name	當前路徑名字

當然，你也可以在自己定義路由規則（map)的時候自定義欄位，用以特殊目的。

全匹配片段的語法是使用萬用字元* 如，/user/*any就會匹配到任何以/user為開頭的路徑，並給params物件中賦值一個屬性any

動態片段的語法就是使用:作為標誌。

使用路徑名稱

在定義路徑規則的時候，如果你給它提供了一個name屬性，則可以在後續使用這條路徑規則的時候，直接引用。

router.map({
'/user/:userId': {
name: 'user',
component: {...}
}
});

在v-link中使用

<a v-link="{name: 'user',params: {userId: 1}">This is a user whose id is 1</a>

還可以使用router.go()

router.go({name: 'user',params: {userId: 1}});

最終都會匹配到/user/1這條路徑上

路由選項

路由選項名	預設值	作用
hashbang	true	將路徑格式化為#!開頭
history	false	啟用HTML5 history模式，可以使用pushState和replaceState來管理記錄
abstract	false	使用一個不依賴於瀏覽器的瀏覽歷史虛擬管理後端。
transitionOnLoad	false	初次載入是否啟用場景切換
saveScrollPosition	false	在啟用html5 history模式的時候生效，用於後退操作的時候記住之前的滾動條位置
linkActiveClass	"v-link-active"	連結被點選時候需要新增到v-link元素上的class類,預設為active

如，我想採用一個有路徑格式化並啟用Html5 history功能的路由器，則可以在路由器初始化的時候，指定這些引數：

var router = new VueRouter({
hashbang: true,
history: true
});

這裡只是做了一些簡單的介紹，更多選項其參考官方文件http://router.vuejs.org/zh-cn/。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。