v-link · vue · 看云

# v-link `v-link` 是一個用來讓用戶在 vue-router 應用的不同路徑間跳轉的指令。該指令接受一個 JavaScript 表達式，并會在用戶點擊元素時用該表達式的值去調用 `router.go`。 ``` html  <a v-link="'home'">Home</a>  <a v-link="{ path: 'home' }">Home</a>  <a v-link="{ name: 'user', params: { userId: 123 }}">User</a> ``` 你應該使用 `v-link` 而不是 `href` 來處理瀏覽時的跳轉。原因如下： - 它在 HTML5 history 模式和 hash 模式下的工作方式相同，所以如果你決定改變模式，或者 IE9 瀏覽器退化為 hash 模式時，都不需要做任何改變。 - 在 HTML5 history 模式下，`v-link` 會監聽點擊事件，防止瀏覽器嘗試重新加載頁面。 - 在 HTML5 history 模式下使用 `root` 選項時，不需要再 `v-link` 的 URL 中包含 root 路徑。 #### 鏈接活躍時的 class 帶有 `v-link` 指令的元素，如果 `v-link` 對應的 URL 匹配當前的路徑，該元素會被添加特定的 class。默認添加的 class 是 `.v-link-active`，而判斷是否活躍使用的是**包含性匹配**。舉例來說，一個帶有指令 `v-link="/a"` 的元素，只要當前路徑以 `/a` 開頭，此元素即會被判斷為活躍。連接是否活躍的匹配也可以通過 `exact` 內聯選項來設置為只有當路徑完全一致時才匹配： ``` html <a v-link="{ path: '/a', exact: true }"></a> ``` 鏈接活躍時的 class 名稱可以通過在創建路由器實例時指定 `activeLinkClass` 全局選項來自定義，也可以通過 `activeClass` 內聯選項來單獨指定： ``` html <a v-link="{ path: '/a', activeClass: 'custom-active-class' }"></a> ``` #### 其他選項 - **replace** 一個帶有 `replace: true` 的鏈接被點擊時將會觸發 `router.replace()` 而不是 `router.go()`。由此產生的跳轉不會留下歷史記錄： ``` html <a v-link="{ path: '/abc', replace: true }"></a> ``` - **append** 帶有 `append: true` 選項的相對路徑鏈接會確保該相對路徑始終添加到當前路徑之后。舉例來說，從 `/a` 跳轉到相對路徑 `b` 時，如果沒有 `append: true` 我們會跳轉到 `/b`，但有 `append: true` 則會跳轉到 `/a/b`。 ``` html <a v-link="{ path: 'relative/path', append: true }"></a> ``` #### 其他注意點 - `v-link` 會自動設置 `<a>` 的 `href` 屬性。 - 由于 `v-link` 是個[字面量指令](http://vuejs.org/guide/directives.html#Literal_Directives)，它可以包含 mustache 標簽，例如 `v-link="/user/{% raw %}{{user.name}}{% endraw %}"` 。