vue中的router-link屬性詳解

vue中的router-link屬性有以下屬性值：to相當於herf標籤用於添加跳轉內容，replace用於頁面切換時不會留下歷史記錄以及tag將router-link渲染成對應的標籤等等

在vue中，vue.js與vue-router 兩者結合在一起可以實現簡單的單頁面應用，其中是一個組件，主要用於設置導航的鏈接來實現不同的HTML內容切換。接下來在文章中將為大家具體介紹這個屬性，具有一定的參考價值，希望對大家有幫助。

【推薦課程：Vue教學】

#router-link標籤

在vue1.0版本中的仍然用a標籤來實現連結跳轉功能，但連結位址與html中不同，它是採用v-link屬性來控制。但在2.0版本中a標籤就被替換成了rount-link屬性，但最終在頁面上顯示還是會被渲染成a標籤。接下來將要詳細的介紹該屬性中的各個值的用法

router-link屬性值詳解

（1）":to" 屬性值

這個屬性值就相當於a標籤中的"herf"屬性，後面的內容為跳轉連結的內容

<router-link :to="http://www.php.cn/">PHP中文网</router-link>

相當於

<a href="http://www.php.cn/">PHP中文网</a>

#（2）" replace" 屬性值

replace屬性值在routre-link標籤中新增的主要目的在於頁面切換時不會留下歷史記錄

<router-link :to="http://www.php.cn/" replace></router-link>

（3）" tag" 屬性值

具有tag屬性的router-link都會被渲染成對應的標籤

<router-link :to="/http://www.php.cn/" tag="li">PHP中文网</router-link>

相當於

<li>PHP中文网</li>

此時的頁面中的li同樣會起到a標籤的作用，因為vue會自動為其綁定點擊事件，並跳到頁面

（4）"active-class"屬性值

#這個屬性是用來設定啟動連結時class屬性，也就是目前頁面及所有與目前頁面位址所匹配的的連結都會被加入class屬性

<router-link :to="http://www.php.cn/" active-class="u-link--Active">PHP中文网</router-link>

active-class屬性的預設值是router -link-active,所以如果沒有設置，就會被渲染為這個class

（5）「append」屬性值

設定append 屬性後，則在目前(相對) 路徑前新增基底路徑。例如，我們從/a 導航到一個相對路徑b，如果沒有配置append，則路徑為/b，如果配了，則為/a/b

<router-link :to="{ path: &#39;relative/path&#39;}" append></router-link>

使用router-link代替a標籤的好處

router-link屬性在頁面中可以渲染為任何元素，例如上述程式碼中渲染成li標籤依然實現了跳躍效果。另外當我們點選a標籤時可能會重載頁面，但是使用router-link後此標籤會被vue所監聽，跳轉連結時就不會刷新頁面了。

總結：以上就是這篇文章的全部內容了，希望對大家有幫助。

以上是vue中的router-link屬性詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！