創(chuàng)新互聯(lián)www.cdcxhl.cn八線動態(tài)BGP香港云服務(wù)器提供商，新人活動買多久送多久，劃算不套路！

10年積累的成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先做網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有邵東免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

小編這次要給大家分享的是vue中router-link和傳統(tǒng)a鏈接有什么區(qū)別，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。

Vue-router是伴隨著Vue框架出現(xiàn)的路由系統(tǒng)，它也是公認的一種優(yōu)秀的路由解決方案。在使用Vue-router時候，我們常常會使用其自帶的路徑跳轉(zhuǎn)組件Link,通過實現(xiàn)跳轉(zhuǎn)，這和傳統(tǒng)的何其相似！但它們到底有什么具體的區(qū)別呢？

官方中給出的解釋是這樣的：

<router-link> 比起寫死的 <a href="..." rel="external nofollow" rel="external nofollow" > 會好一些，理由如下：

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

在 HTML5 history 模式下，router-link 會守衛(wèi)點擊事件，讓瀏覽器不再重新加載頁面。

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

呃呃，只能說博主剛學時第一次并沒有看懂(應(yīng)該是之前的基礎(chǔ)知識不牢固吧，看來之后得補補啦)，于是去自行查閱啦：

<a href="..." rel="external nofollow" rel="external nofollow" >

W3C中是這樣解釋a標簽的：

<a> 標簽定義超鏈接，用于從一張頁面鏈接到另一張頁面。

從一張頁面跳轉(zhuǎn)到另一張頁面，但從這里來說就違背了多視圖的單頁Web應(yīng)用這個概念

通過a標簽進行跳轉(zhuǎn)，頁面會被重新渲染，即相當于重新打開一個新的網(wǎng)頁，體現(xiàn)為視覺上的“閃爍”（如果是本地的項目基本看不出來）

router-link

<router-link> 組件支持用戶在具有路由功能的應(yīng)用中 (點擊) 導航。 通過 to 屬性指定目標地址，默認渲染成帶有正確鏈接的 <a> 標簽，可以通過配置 tag 屬性生成別的標簽.。

通過router-link進行跳轉(zhuǎn)不會跳轉(zhuǎn)到新的頁面，也不會重新渲染，它會選擇路由所指的組件進行渲染，避免了重復渲染的“無用功”。

總結(jié)：對比<a>，router-link組件避免了不必要的重渲染,它只更新變化的部分從而減少DOM性能消耗

Vue的創(chuàng)新之處在于，它利用虛擬DOM的概念和diff算法實現(xiàn)了對頁面的"按需更新"，

Vue-router很好地繼承了這一點，重渲染是我們不希望看到的，因為無論跳轉(zhuǎn)到哪個頁面，只需要渲染一次就夠了。<Link>組件幫助我們實現(xiàn)了這個愿望

反觀<a>標簽，每次跳轉(zhuǎn)都得重渲染一次，在一個浩大的項目里，這多么可怕！我們的"渲染"做了許多"無用功"，而且消耗了大量彌足珍貴的DOM性能！

補充知識：使用vue中路由router-link中包含a標簽

當vue中使用router-link包含a標簽的時候，a標簽會取代routerlink的值實現(xiàn)跳轉(zhuǎn)，

<div class="list" v-for="(item,index) in listName" @click="toDetail(item.id)">
<p>{{item.name}}</p>
<p>{{item.address}}</p>
<p>{{item.distance}}米</p>
<a :href="getUrl(item.tel)" rel="external nofollow" rel="external nofollow" >圖標{{item.tel}}</a>
</div>
<!--<router-link :to="{path:'detail',query:{id:item.id}}" tag="div" class="list" v-for="(item,index) in listName" @click="toDetail()">
<p>{{item.name}}</p>
<p>{{item.address}}</p>
<p>{{item.distance}}米</p>
<a :href="getUrl(item.tel)" rel="external nofollow" rel="external nofollow" >圖標{{item.tel}}</a>
</router-link>-->

分享題目：vue中router-link和傳統(tǒng)a鏈接有什么區(qū)別-創(chuàng)新互聯(lián)
本文來源：http://chinadenli.net/article4/edjie.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、商城網(wǎng)站、建站公司、網(wǎng)站導航、云服務(wù)器、企業(yè)建站

廣告

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