一、前言
為什麼要提到路由，我們都知道，很多時候單個頁面中也會有一些跳轉，這個時候需要用到錨點，而路由就是vue中的錨點管理器，負責連結到任意位置。傳統的錨點連結跳轉都是採用a標籤的超連結，而vue單頁面則是採用路由的形式進行路徑之間的切換，也就是元件的切換。當我們在後面建立vue應用後，我們跳轉最好使用路由，以免跳轉效果失效，好了，廢話不多說，擼起袖子加油幹。
二、下載vuerouter
在使用前我們需要下載，地址：目前咱們用的是最新版本的vuerouter，版本為3。5。2，下載地址：https：//url18。ctfile。com/f/7715018-514080688-6bbe47（訪問密碼：6511）。
三、匯入並建立路由例項
首先匯入vue路由檔案，如下：
然後我們例項化vue路由檔案，如下：
const router = new VueRouter（{。。。。。}）
最後將例項化後的變數寫入到vue例項中，如下：
new Vue（{ router }）。$mount（“。aa”）
四、router-link
該元件是為了建立一個連結，它有幾個屬性，如下：
tostring/Object 相當於a標籤的href屬性replace不留下導航記錄append在當前路徑後加路徑 /a => /a/btag指定渲染成什麼標籤 如p標籤active-class 設定啟用連結時class屬性exact 開啟router-link的嚴格模式
我們可以分別設定這些屬性，如下：
可以看到，當前的內容的確按照我們設定的發生了變化。
1。to
他是用來設定路由地址的，也就是相當於a標籤中的href，如下：
當我們設定後，如果點選後會被啟用，啟用後的樣式就是我們設定了的r1、r2樣式。to屬性的用法並不僅限於只有簡單的一個地址，它還可以改變路由地址和請求引數查詢等，下面讓我們來領教一下它的魅力吧。
1）。增加路由地址
如果我們想增加多層地址，可以這樣做，如下：
這是最簡單的方法了，還可以透過動態改變屬性來實現，如下：
不過，你還可以透過使用鍵值對的方法來實現，如下：
你也可以動態繫結這些鍵值對，如下：
2）。請求引數查詢
我們還可以使用to屬性來實現請求引數的查詢，如下：
此時to務必要是動態繫結的屬性才能正確顯示請求格式，否則會全部輸出。
2。路由地址的追加
在當前頁面進行追加指定地址，可以一直進行追加，如下：
3。啟用樣式
我們可以定義路由被點選後的樣式，點選後即表示激活了，在未指定啟用樣式前，我們可以看到，預設的樣式，如下：
現在我們可以修改這些預設樣式，如下：
可以看到，上面雖然有兩個類，但是隻有一個起到了作用，其實這是因為這兩個都是在激活了才有效的，不過由於後者優先順序高於前者，因此字型顏色呈現出綠色。其實vuerouter還給我們提供了一種設定方法，用於自定義啟用類，如下：
其實這兩類名的功能差不多，只不過active-class是模糊查詢，而exact-active-class是精確查詢。當用戶訪問的是更精確的地址的時候，結果以exact-active-class為準，所以使用模糊查詢時類名會被應用到多個具有相同規則的路徑上。
4。修改標籤
預設router-link生成的是a標籤，但是我們可以將它變為其它標籤，比如div、p或者span標籤，如下：
5。事件
router-link不支援使用原生的v-on來繫結事件，它提供了event來讓我們實現事件的監聽和觸發，如下：
如果我們想要在觸發前新增一些函式來執行某個操作的話，如下：
五、總結
本文主要講了一些關於vuerouter的基礎知識，可以看出，使用起來比較簡單，想要本文原始碼，請關注公眾號“簡易程式設計網”並回復vue12即可獲取。
