技術標籤：vue.js網路基礎知識vuejavascriptweb

當我們用滑鼠中鍵點選一個帶href屬性的a標籤時，我們會發現它會跳轉到新的頁面。此時即使新增preventDefault屬性也沒有用。因為對於a標籤，當用中鍵點選時，會預設從新視窗開啟連結

要想阻止這一行為，我們可以將a標籤轉換為其他標籤如span，再給span新增click屬性。

比如，當我們使用vue的router-link標籤建立路由標籤時，預設建立的是a標籤

<router-link :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
 

v-for='tag in visitedViews'
:key='tag.path'
:class='isActive(tag)? "active" : ""'
class='tags-views-item'
@click.middle.native="!isFix(tag)?closeSelectedTag(tag):''"
@contextmenu.prevent.native="openMenu(tag,$event)"
>
{{tag.title}}
</router-link>

當我們將router的tag屬性設為span時，既可解決這一問題

<router-link :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
tag = 'span'
v-for='tag in visitedViews'
:key='tag.path'
:class='isActive(tag)? "active" : ""'
class='tags-views-item'
@click.middle.native="!isFix(tag)?closeSelectedTag(tag):''"
 

@contextmenu.prevent.native="openMenu(tag,$event)"
>
{{tag.title}}
</router-link>

拓展，對於a標籤的target屬性
規定在何處開啟連結文件

_blank 在新標籤頁開啟標籤
_parent 在父級frameset開啟標籤
_self 在當前frameset開啟標籤
_top 去掉頁框並用document.html取代frameset
framename 在名為framename的框架中開啟標籤

此外，若想了解更多關於router-link的用法可以參考官方文件