踩坑，vue router-link和a標簽的本質區別

問題現象

首頁的標題跳轉，沒有進入規定的路由，而是被當做異常路由接收了

排查分析

在跳轉前，明明已經添加動態路由，並且通過console.log()也打印出了路由，說明動態路由是添加成功的

導航Airticle模塊也是動態添加路由，是能成功跳轉的。證明添加路由的函數也是沒問題的

2000 thouthands later...
...
...

唯一的區別，是導航Airticle那邊用的是<router-link>標簽，首頁這邊用的是<a>標簽

猜測可能和使用的標簽有關

於是稍微修改下代碼進行對比測試實驗

<template>
<div class='articlePreview'>
// router-link 標簽
<router-link :to="{name:'detail'+homePrewlist.id, params:{id:homePrewlist.id}}"> {{homePrewlist.title}} </router-link>

// a 標簽
<a :href="'/artical/detail/'+homePrewlist.id"><h1>{{ homePrewlist.title }}</h1></a>
</div>
</template>

頁面就變成了如下樣子，分別點擊兩個標題，得到了不一樣的結果

答案已經很明顯了，就是<router-link>標簽和<a>標簽的問題

繼續針對兩個標簽進行深究

a標簽

<a href="">鏈接 </a>

router-link

<router-link to=""></router-link>

a標簽

點擊a標簽從當前頁面跳轉到另一個頁面
通過a標簽跳轉，頁面就會重新加載，相當於重新打開了一個網頁

router-link

通過router-link進行跳轉不會跳轉到新的頁面，不會重新渲染，它會選擇路由所指的組件進行渲染

總結

通過a標簽和router-link對比，router-link避免了重復渲染，不像a標簽一樣需要重新渲染，導致一些動態添加路由的機制失效

文章來自 Yongchin'blog yongchin.xyz