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

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

<router-link> 比起寫死的 <a href='http://m.b3g6.com/bcjs/...' rel='external nofollow' rel='external nofollow' > 會好一些，理由如下：

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

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

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

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

<a href='http://m.b3g6.com/bcjs/...' rel='external nofollow' rel='external nofollow' >

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

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

從一張頁面跳轉到另一張頁面，但從這里來說就違背了多視圖的單頁Web應用這個概念

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

router-link

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

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

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

Vue的創新之處在于，它利用虛擬DOM的概念和diff算法實現了對頁面的'按需更新'，

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

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

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

當vue中使用router-link包含a標簽的時候，a標簽會取代routerlink的值實現跳轉，

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

下面這個routerlink中a標簽會替代router-link的使用

可以使用div加點擊事件

2 當在vue中實現 a href='tel:1325425652' rel='external nofollow' 的時候，直接使用：href='http://m.b3g6.com/bcjs/tel' rel='external nofollow' +變量的方法不可以，

可以使用函數封裝

getUrl(tel){return 'tel:'+tel;},

以上這篇詳談vue中router-link和傳統a鏈接的區別就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。