這篇文章主要介紹vue中的router-link屬性是什么，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)專(zhuān)注于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站開(kāi)發(fā)。公司秉持“客戶(hù)至上,用心服務(wù)”的宗旨,從客戶(hù)的利益和觀點(diǎn)出發(fā),讓客戶(hù)在網(wǎng)絡(luò)營(yíng)銷(xiāo)中找到自己的駐足之地。尊重和關(guān)懷每一位客戶(hù)，用嚴(yán)謹(jǐn)?shù)膽B(tài)度對(duì)待客戶(hù)，用專(zhuān)業(yè)的服務(wù)創(chuàng)造價(jià)值，成為客戶(hù)值得信賴(lài)的朋友，為客戶(hù)解除后顧之憂(yōu)。

vue中的router-link屬性有以下屬性值：to相當(dāng)于herf標(biāo)簽用于添加跳轉(zhuǎn)內(nèi)容，replace用于頁(yè)面切換時(shí)不會(huì)留下歷史記錄以及tag將router-link渲染成相應(yīng)的標(biāo)簽等等

在vue中，vue.js與 vue-router 兩者結(jié)合在一起可以實(shí)現(xiàn)簡(jiǎn)單的單頁(yè)面應(yīng)用，其中<router-link>是一個(gè)組件，主要用于設(shè)置導(dǎo)航的鏈接來(lái)實(shí)現(xiàn)不同的HTML內(nèi)容切換。

router-link標(biāo)簽

在vue1.0版本中的仍然用a標(biāo)簽來(lái)實(shí)現(xiàn)鏈接跳轉(zhuǎn)功能，但鏈接地址與html中不同，它是采用v-link屬性來(lái)控制。但是在2.0版本中a標(biāo)簽就被替換成了rount-link屬性，但是最終在頁(yè)面上顯示還是會(huì)被渲染成a標(biāo)簽。接下來(lái)將要詳細(xì)的介紹該屬性中的各個(gè)值的用法

router-link屬性值詳解

（1）":to" 屬性值

這個(gè)屬性值就相當(dāng)于a標(biāo)簽中的"herf"屬性，后面的內(nèi)容為跳轉(zhuǎn)鏈接的內(nèi)容

<router-link :to="http://www.php.cn/">創(chuàng)新互聯(lián)</router-link>

相當(dāng)于

<a href="http://www.php.cn/">創(chuàng)新互聯(lián)</a>

（2）"replace" 屬性值

replace屬性值在routre-link標(biāo)簽中添加的主要目的在于頁(yè)面切換時(shí)不會(huì)留下歷史記錄

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

（3）"tag" 屬性值

具有tag屬性的router-link都會(huì)被渲染成相應(yīng)的標(biāo)簽

<router-link :to="/http://www.php.cn/" tag="li">創(chuàng)新互聯(lián)</router-link>

相當(dāng)于

<li>創(chuàng)新互聯(lián)</li>

此時(shí)的頁(yè)面中的li同樣會(huì)起到a標(biāo)簽的作用，因?yàn)関ue會(huì)自動(dòng)為其綁定點(diǎn)擊事件，并跳轉(zhuǎn)頁(yè)面

（4）"active-class"屬性值

這個(gè)屬性是用于設(shè)置激活鏈接時(shí)class屬性，也就是當(dāng)前頁(yè)面及所有與當(dāng)前頁(yè)面地址所匹配的的鏈接都會(huì)被添加class屬性

<router-link :to="http://www.php.cn/" active-class="u-link--Active">創(chuàng)新互聯(lián)</router-link>

active-class屬性的默認(rèn)值是router-link-active,所以如果沒(méi)有設(shè)置，就會(huì)被渲染為這個(gè)class

（5）“append”屬性值

設(shè)置 append 屬性后，則在當(dāng)前 (相對(duì)) 路徑前添加基路徑。例如，我們從 /a 導(dǎo)航到一個(gè)相對(duì)路徑 b，如果沒(méi)有配置 append，則路徑為 /b，如果配了，則為 /a/b

<router-link :to="{ path: 'relative/path'}" append></router-link>

使用router-link代替a標(biāo)簽的好處

router-link屬性在頁(yè)面中可以渲染為任何元素，比如上述代碼中渲染成li標(biāo)簽依然實(shí)現(xiàn)了跳轉(zhuǎn)效果。另外當(dāng)我們點(diǎn)擊a標(biāo)簽時(shí)可能會(huì)重載頁(yè)面，但是使用router-link后此標(biāo)簽會(huì)被vue所監(jiān)聽(tīng)，跳轉(zhuǎn)鏈接時(shí)就不會(huì)刷新頁(yè)面了。

以上是“vue中的router-link屬性是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)頁(yè)標(biāo)題：vue中的router-link屬性是什么
文章位置：http://chinadenli.net/article6/jhhjog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、ChatGPT、網(wǎng)站設(shè)計(jì)公司、微信公眾號(hào)、網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)