如何在Vue 3中擴展Vue Router鏈接詳解

前言

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

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

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

AppLink組件

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

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

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

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

就像現在這樣，我們已經(jīng)處理了所有的內部鏈接。那么，外部鏈接呢？如前所述，外部鏈接使用a 標簽，所以讓我們把它添加到我們的模板中。像路由器鏈接一樣，我們應該傳遞槽。讓我們也把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>

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

現在，我們只需要一個(gè)條件來(lái)告訴我們提供給AppLink的是什么類(lèi)型的鏈接。我們可以創(chuàng )建一個(gè)名為isExternal 的計算屬性來(lái)確定這一點(diǎn)。首先，我們要檢查我們的to道具的值是否是一個(gè)字符串。這是必要的，因為to 道具可能是一個(gè)對象，比如有時(shí)傳遞給router-link （即:to="{name:'RouteNameHere'}" ）。然后，我們將檢查該字符串是否以http 的字符串開(kāi)始。如果這兩個(gè)條件都是真的，那么我們就有了自己的一個(gè)外部鏈接。

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

router-link在模板區，我們現在可以在一個(gè)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
<AppLink :to="[external-or-internal-link]">Click Me</AppLink>

進(jìn)一步的靈活性

在新標簽頁(yè)中打開(kāi)

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

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

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

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

鏈接安全

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

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

關(guān)于這個(gè)問(wèn)題的更多細節，請看這個(gè)。

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

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

外部鏈接的獨特風(fēng)格

我看到一些網(wǎng)站在其網(wǎng)站上的外部鏈接的樣式與通往他們自己網(wǎng)站上其他地方的鏈接有點(diǎn)不同。這可以幫助用戶(hù)更好地了解他們是如何在一個(gè)他們原本沒(méi)有訪(fǎng)問(wèn)過(guò)的網(wǎng)站上結束的。它可以是任何東西，從鏈接旁邊的一個(gè)微妙的 "外部鏈接 "圖標到鏈接下面的一個(gè)小警告，比如說(shuō) "鏈接到第三方網(wǎng)站"。在我們的組件中實(shí)現這一點(diǎn)很簡(jiǎn)單，只要在我們的模板中的a 標簽上添加一個(gè)external-link 類(lèi)，然后用css來(lái)改變它的風(fēng)格，或者添加一個(gè):after sudo-element。你甚至可以為外部鏈接添加全新的元素，比如一個(gè)字體超贊的圖標。

// 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>

總結

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

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