今天用vue在做一個(gè)tab欄切換的時(shí)候稍坯，偶然發(fā)現(xiàn)我綁定在router-link上的click并不會(huì)觸發(fā)炒瘸，
后來(lái)測(cè)試發(fā)現(xiàn)，所有綁定在router-link中的事件都不會(huì)促發(fā)
此后查看了官方的文檔背零，也并沒(méi)有給出明確的說(shuō)明：
代碼如下：
<router-link @click="change"><span>{{item.text}}</span></router-link>
此刻我發(fā)現(xiàn)，無(wú)論如何定義在methods 中的 change函數(shù)并不會(huì)觸發(fā)趟大，這是為什么呢？
在github查看了vue-router的代碼后發(fā)現(xiàn)：
圖片
事件被阻止
如果當(dāng)前router-link的tag不是a的話（官方文檔中說(shuō)明：默認(rèn)為a铣焊，可以通過(guò)tag改變渲染后的標(biāo)簽）逊朽，那么就會(huì)往自己的子元素（組件）找，找到的第一個(gè)就會(huì)把一些屬性及時(shí)間覆蓋過(guò)去曲伊。
所以此時(shí)事件是被阻止了叽讳。個(gè)人看法：因?yàn)閞outer-link的作用是單純的路由跳轉(zhuǎn)，如果不阻止事件的話坟募，也許會(huì)有很多坑岛蚤，所以作者干脆阻止了其他事件的觸發(fā)
如何解決
<router-link @click.native="change"><span>{{item.text}}</span></router-link>
只需要在@click后面加上native就可以了
原生事件
添加native事件修飾符之后變?yōu)樵录?/p>
$element.addEventListener(click, callback);
此時(shí)a標(biāo)簽并不會(huì)阻止，至此便可以解決綁定在router-link身上的事件不會(huì)觸發(fā)的問(wèn)題懈糯。
其次涤妒，想要實(shí)現(xiàn)tab切換添加class可以在router中添加如下配置：
export default new Router({
routes: [],// 路由跳轉(zhuǎn)配置
linkActiveClass:'active' // 在路由中添加配置 active 為跳轉(zhuǎn)到該路由時(shí)添加的激活類名
})
