前言

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

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

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

AppLink組件

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

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

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

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

就像現(xiàn)在這樣，我們已經(jīng)處理了所有的內(nèi)部鏈接。那么，外部鏈接呢？如前所述，外部鏈接使用a 標(biāo)簽，所以讓我們把它添加到我們的模板中。像路由器鏈接一樣，我們應(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)部鏈接和外部鏈接!在這一點(diǎn)上，可能值得注意的是，上述方法只適用于Vue 3，因?yàn)樗顺^1個(gè)根元素）。

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

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

router-link在模板區(qū)，我們現(xiàn)在可以在一個(gè)v-if中使用isExternal 計(jì)算的道具，當(dāng)它是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)用程序中全局注冊(cè)該組件后，你現(xiàn)在可以像這樣使用它。

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

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

在新標(biāo)簽頁中打開

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

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

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

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

鏈接安全

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

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

關(guān)于這個(gè)問題的更多細(xì)節(jié)，請(qǐng)看這個(gè)信息性的帖子。

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

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

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

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

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

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

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

最新評(píng)論