vue中router-link和傳統(tǒng)a鏈接有什么區(qū)別

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

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

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

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

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

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

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

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

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

W3C中是這樣解釋a標(biāo)簽的：

<a> 標(biāo)簽定義超鏈接，用于從一張頁(yè)面鏈接到另一張頁(yè)面。

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

通過(guò)a標(biāo)簽進(jìn)行跳轉(zhuǎn)，頁(yè)面會(huì)被重新渲染，即相當(dāng)于重新打開(kāi)一個(gè)新的網(wǎng)頁(yè)，體現(xiàn)為視覺(jué)上的“閃爍”（如果是本地的項(xiàng)目基本看不出來(lái)）

router-link

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

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

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

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

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

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

補(bǔ)充知識(shí)：使用vue中路由router-link中包含a標(biāo)簽

當(dāng)vue中使用router-link包含a標(biāo)簽的時(shí)候，a標(biāo)簽會(huì)取代routerlink的值實(shí)現(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" >圖標(biāo){{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" >圖標(biāo){{item.tel}}</a>
</router-link>-->

下面這個(gè)routerlink中a標(biāo)簽會(huì)替代router-link的使用

可以使用div加點(diǎn)擊事件

2 當(dāng)在vue中實(shí)現(xiàn) a href="tel:1325425652" rel="external nofollow" 的時(shí)候，直接使用：href="tel" rel="external nofollow" +變量的方法不可以，

可以使用函數(shù)封裝

getUrl(tel){
return "tel:"+tel;

},

看完這篇關(guān)于vue中router-link和傳統(tǒng)a鏈接有什么區(qū)別的文章，如果覺(jué)得文章內(nèi)容寫(xiě)得不錯(cuò)的話，可以把它分享出去給更多人看到。