對於單頁應用，官方提供了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的語法進行配置，也是很容易做到的:

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

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; //將路由器匯出

1. 在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會被注入每個元件中，可以利用它進行一些資訊的獲取。如

當然，你也可以在自己定義路由規則（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這條路徑上

路由選項

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

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

這裡只是做了一些簡單的介紹，更多選項其參考這裡。

最後，更多高階用法請參考官方文件。

參考文件

官方文件