前言

<router-link> 標簽是一個很好的工具，可以在你的Vue應(yīng)用程序的不同頁面之間進行導航，但當導航到一個外部鏈接時，它不是一個工具，為此，你應(yīng)該使用一個普通的<a> 標簽。也許這只是我的問題，但很多時候，我都懶得去理會這其中的差別。其他時候，鏈接可能是動態(tài)的，也就是說，來自數(shù)據(jù)庫或一些用戶提供的數(shù)據(jù)源。在這種情況下，你根本不知道這個鏈接是外部的還是內(nèi)部的，而且在每個可能使用這個鏈接的地方手動做V-if是多么痛苦的事情。

如果只是用一個單一的組件來處理所有的內(nèi)部和外部鏈接，那不是很好嗎？如果你和我一樣，你現(xiàn)在就會這樣做。

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

AppLink組件

我們應(yīng)該做的第一件事是讓我們的AppLink組件接受所有與路由器鏈接相同的道具。為什么？這樣我們的組件的 "接口 "就可以模仿Router Link的接口，我們就不會有另一個API需要記住。我們可以通過從Vue Router中導入RouterLink，并將它的props分散到我們組件的props選項中來實現(xiàn)。

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

在模板區(qū)，我們現(xiàn)在可以創(chuàng)建一個路由器鏈接標簽，并將我們組件的所有道具綁定到它。我們還需要傳入插槽，以便標簽之間提供的文本和標記將出現(xiàn)在路由器鏈接中。

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

就像現(xiàn)在這樣，我們已經(jīng)處理了所有的內(nèi)部鏈接。那么，外部鏈接呢？如前所述，外部鏈接使用a 標簽，所以讓我們把它添加到我們的模板中。像路由器鏈接一樣，我們應(yīng)該傳遞槽。讓我們也把href 綁定到to 屬性。

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

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

現(xiàn)在，我們只需要一個條件來告訴我們提供給AppLink的是什么類型的鏈接。我們可以創(chuàng)建一個名為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在模板區(qū)，我們現(xiàn)在可以在一個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>

就這樣了!我們完成了!在你的應(yīng)用程序中全局注冊該組件后，你現(xiàn)在可以像這樣使用它。

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

進一步的靈活性

在新標簽頁中打開

讓我們把AppLink 組件變得更加有用。比方說，我們希望所有的外部鏈接總是在新的標簽頁中打開。很簡單。只要在組件中的<a> 標簽上添加一個target="_blank" ，整個網(wǎng)站的所有外部鏈接現(xiàn)在都在新標簽中打開。

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

這是你可能希望適用于你網(wǎng)站上大多數(shù)外部鏈接的規(guī)則，但如果你希望任何特定的外部鏈接在同一標簽中打開，你可以用html目標屬性告訴該鏈接實例這樣做。

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

鏈接安全

當你使用target="_blank" 屬性鏈接到另一個網(wǎng)站上的一個頁面時，你最終會使你的網(wǎng)站暴露在性能和安全問題中。

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

關(guān)于這個問題的更多細節(jié)，請看這個信息性的帖子。

解決這個問題的辦法是為你所有的外部鏈接標簽提供一個rel="noopener" 屬性。但要記住這樣做是多么痛苦啊......哦，等等......我們不需要這樣做。我們可以在我們的AppLink 組件中添加一次，就可以了。

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

外部鏈接的獨特風格

我看到一些網(wǎng)站在其網(wǎng)站上的外部鏈接的樣式與通往他們自己網(wǎng)站上其他地方的鏈接有點不同。這可以幫助用戶更好地了解他們是如何在一個他們原本沒有訪問過的網(wǎng)站上結(jié)束的。它可以是任何東西，從鏈接旁邊的一個微妙的 "外部鏈接 "圖標到鏈接下面的一個小警告，比如說 "鏈接到第三方網(wǎng)站"。在我們的組件中實現(xiàn)這一點很簡單，只要在我們的模板中的a 標簽上添加一個external-link 類，然后用css來改變它的風格，或者添加一個: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-link i {
  font-size: 0.8em;
  opacity: 0.7;
}
</style>

總結(jié)

這只是你可以擴展router-link以適應(yīng)常見和特殊情況下的需求的一個嘗試。另外，由于你的所有鏈接都被封裝在一個單一的組件中，你可以很容易地更新你所有鏈接的不同方面。你能想到任何其他有用的方法來改進我們的AppLink 組件嗎？你是否在你的應(yīng)用程序中使用類似的方法，并有一些智慧可以分享？

到此這篇關(guān)于如何在Vue 3中擴展Vue Router鏈接的文章就介紹到這了,更多相關(guān)Vue3擴展Vue Router鏈接內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論