1. router-link：

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

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

在 HTML5 history 模式下，router-link 會守衛點選事件，讓瀏覽器不再重新載入頁面。在 HTML5 history 模式下使用 base 選項之後，所有的 to 屬性都不需要寫 (基路徑) 了。

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

2. a 標籤：

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

<a> 標籤定義超連結，用於從一張頁面連結到另一張頁面。

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

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

router-link:

<router-link> 元件支援使用者在具有路由功能的應用中 (點選) 導航。 通過 to 屬性指定目標地址，預設渲染成帶有正確連結的 <a> 標籤，可以通過配置 tag 屬性生成別的標籤.。

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

總結：

　　對比<a>，router-link 元件避免了不必要的重渲染，它只更新變化的部分從而減少DOM效能消耗。Vue的創新之處在於，它利用虛擬 DOM 的概念和 diff 演算法實現了對頁面的"按需更新"，Vue-router很好地繼承了這一點，重渲染是我們不希望看到的，因為無論跳轉到哪個頁面，只需要渲染一次就夠了。反觀<a>標籤，每次跳轉都得重渲染一次。

補充：

使用vue中路由router-link中包含a標籤：

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

<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>-->

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

可以使用div加點選事件

2. 當在 vue 中實現 a href="tel:1325425652" rel="external nofollow" 的時候，不可以直接使用：href="tel" rel="external nofollow" +變數的方法；

可以使用函式封裝：

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