前言： 在專案中，我用到了vue +iview + vue-router 開發； 然後導航條就使用了iview的Menu元件，結果發覺導航條的內容點選一次之後不會顯示高亮樣式，而是先跳轉了，我再點選一次，才會高亮顯示。

在看了vue-router的文件之後，發覺有一個很好用的東西，就是router-link的屬性： active-class 和 exact。

為什麼要使用router-link? 官網上說明了這幾點好處：
元件支援使用者在具有路由功能的應用中（點選）導航。 通過 to 屬性指定目標地址，預設渲染成帶有正確連結的 a 標籤，可以通過配置 tag 屬性生成別的標籤.。另外，當目標路由成功啟用時，連結元素自動設定一個表示啟用的 CSS 類名。

比起寫死的 <a href="..."> 會好一些，理由如下：

無論是 HTML5 history 模式還是 hash 模式，它的表現行為一致，所以，當你要切換路由模式，或者在 IE9 降級使用 hash 模式，無須作任何變動。

在 HTML5 history 模式下，router-link 會守衛點選事件，讓瀏覽器不再重新載入頁面。

當你在 HTML5 history 模式下使用 base 選項之後，所有的 to 屬性都不需要寫（基路徑）了。

首先， active-class可以指定一個高亮時的樣式, 比如我定義一個白色粗體的樣式：

    color: #fff
 
;
    font-weight: bold;
    }

然後，就是exact,文件介紹是這樣的
exact

型別: boolean

預設值: false

“是否啟用” 預設類名的依據是 inclusive match （全包含匹配）。 舉個例子，如果當前的路徑是 /a 開頭的，那麼 也會被設定 CSS 類名。

按照這個規則，每個路由都會啟用！想要連結使用 “exact 匹配模式”，則使用 exact 屬性：

<!-- 這個連結只會在地址為 / 的時候被啟用 -->
<router-link to="/" exact>

在考慮到Menu元件的預設css可能會影響我的導航欄，所以我果斷不用Menu元件，然後使用ul標籤；最後，我的程式碼長這樣：

<ul>
<li>
<router-link to="/" active-class="active" > 首頁</roouter-link>
</li>
</ul>


<router-link to="/" active-class="active" tag="li" ><a>首頁</a></roouter-link>

  </ul>
```