前言

<router-link> 標籤是一個很好的工具，可以在你的應用程式的不同頁面之間進行導航，但當導航到一個外部連結時，它不是一個工具，為此，你應該使用一個普通的<a> 標籤。也許這只是我的問題，但很多時候，我都懶得去理會這其中的差別。其他時候，連結可能是動態的，也就是說，來自或一些使用者提供的資料來源。在這種情況下，你根本不知道這個連結是外部的還是內部的，而且在每個可能使用這個連結的地方手動做V-if是多麼痛苦的事情。

如果只是用一個單一的元件來處理所有的內部和外部連結，那不是很好嗎？如果你和我一樣，你現在就會這樣做。

值得慶幸的是，擴充套件<router-link> 元件是非常簡單的，只需將其包裝在你自己的自定義元件中。讓我們開始吧!讓我們建立一個AppLink 元件，它可以處理任何連結，無論是外部還是內部。

AppLink元件

我們應該做的第一件事是讓我們的AppLink元件接受所有與路由器連結相同的道具。為什麼？這樣我們的元件的 "介面 "就可以模仿Router Link的介面，我們就不會有另一個API需要記住。我們可以通過從Vue Router中匯入RouterLink，並將它的props分散到我們元件的props選項中來實現。

// AppLink.vue
<script>
import {RouterLink} from 'vue-router'
export default{
  props:{ ...RouterLink.props }
}
</script>

在模板區，我們現在可以建立一個路由器連結標籤，並將我們元件的所有道具繫結到它。我們還需要傳入插槽，以便標籤之間提供的文字和標記將出現在路由器連結中。

// AppLink.vue
<template>
  <router-link v-bind="$props"><slot /></router-link>
</template>

就像現在這樣，我們已經處理了所有的內部連結。那麼，外部連結呢？如前所述，外部連結使用a 標籤，所以讓我們把它新增到我們的模板中。像路由器連結一樣，我們應該傳遞槽。讓我們也把href 繫結到to 屬性。

// AppLink.vue
<template>
  <a :href="to" rel="external nofollow"  rel="external nofollow" ><slot/></a>
  &
 
lt;router-link v-bind="$props"><slot/></router-link>
</template>

酷，這就說明了內部連結和外部連結!在這一點上，可能值得注意的是，上述方法只適用於Vue 3，因為它包含了超過1個根元素）。

現在，我們只需要一個條件來告訴我們提供給AppLink的是什麼型別的連結。我們可以建立一個名為isExternal 的計算屬性來確定這一點。首先，我們要檢查我們的to道具的值是否是一個字串。這是必要的，因為to 道具可能是一個物件，比如有時傳遞給router-link （即:to="{name:'RouteNameHere'}" ）。然後，我們將檢查該字串是否以http 的字串開始。如果這兩個條件都是真的，那麼我們就有了自己的一個外部連結。

// AppLink.vue
<script>
export default{
   //...
  computed:{
    isExternal(){
      return typeof this.to === 'string' && this.to.startsWith('http')
    }
  }
}
</script>

router-link在模板區，我們現在可以在一個v-if中使用isExternal 計算的道具，當它是a ，否則就顯示true 。

// AppLink.vue
<template>
  <a v-if="isExternal" :href="to" rel="external nofollow"  rel="external nofollow" ><slot/></a>
  <router-link v-else v-bind="$props"><slot/></router-link>
</template>

就這樣了!我們完成了!在你的應用程式中全域性註冊該元件後，你現在可以像這樣使用它。

// Anywhere in your app
<Appwww.cppcns.comLink :to="[external-or-internal-link]">Click Me</AppLink>

進一步的靈活性

在新標籤頁中開啟

讓我們把AppLink 元件變得更加有用。比方說，我們希望所有的外部連結總是在新的標籤頁中開啟。很簡單。只要在元件中的<a> 標籤上新增一個target="_blank" ，整個的所有外部連結現在都在新標籤中開啟。

// AppLink.vue
<template>
  <a ... target="_blank"><slot/></a>
  ...
</template>

這是你可能希望適用於你網站上大多數外部連結的規則，但如果你希望任何特定的外部連結在同一標籤中開啟，你可以用html目標屬性告訴該連結例項這樣做。

<AppLink :to="https://vueschool.io" target="_self">Vue School</AppLink>

連結安全

當你使用target="_blank" 屬性連結到另一個網站上的一個頁面時，你最終會使你的網站暴露在效能和安全問題中。

• 被連結的頁面可能最終與你的頁面在同一程序中執行。根據被連結頁面的情況，這可能會降低你自己頁面的速度。
• 另一個頁面也可以通過window.opener 屬性訪問原始頁面window ，造成安全問題。

關於這個問題的更多細節，請看這個資訊性的帖子。

解決這個問題的辦法是為你所有的外部連結標籤提供一個rel="noopener" 屬性。但要記住這樣做是多麼痛苦啊......哦，等等......我們不需要這樣做。我們可以在我們的AppLink 元件中新增一次，就可以了。

// AppLink.vue
<template>
  <a ... rel="noopener"><slot/></a>
  ...
</template>

外部連結的獨特風格

我看到一些網站在其網站上的外部連結的樣式與通往他們自己網站上其他地方的連結有點不同。這可以幫助使用者更好地瞭解他們是如何在一個他們原本沒有訪問過的網站上結束的。它可以是任何東西，從連結旁邊的一個微妙的 "外部連結 "圖示到連結下面的一個小警告，比如說 "連結到第三方網站"。在我們的元件中實現這一點很簡單，只要在我們的模板中的a 標籤上新增一個external-link 類，然後用來改變它的風格，或者新增一個:after sudo-element。你甚至可以為外部連結新增全新的元素，比如一個字型超讚的圖示。

// AppLink.vue
// (must have font awesome font included in project)
<template>
  <a ... class="external-link">
    <slot/> <i class="fas fa-external-link-alt"></i>
  </a>
  ...
</template>

<style scoped>
.external-li客棧nk i {
  font-size: 0.8em;
  opacity: 0.7;
}
</style>

總結

這只是你可以擴充套件router-link以適應常見和特殊情況下的需求的一個嘗試。另外，由於你的所有連結都被封裝在一個單一的元件中，你可以很容易地更新你所有連結的不同方面。你能想到任何其他有用的方法來改進我們的AppLink 元件嗎？你是否在你的應用程式中使用類似的方法，並有一些智慧可以分享？

到此這篇關於如何在Vue 3中擴充套件Vue Router連結的文章就介紹到這了,更多相關Vue3擴充套件Vue Router連結內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！