So erweitern Sie Vue Router-Links in Vue 3

Vorwort

Das Tag <router-link> ist ein großartiges Tool zum Navigieren zwischen verschiedenen Seiten in Ihrer Vue-App, aber kein Tool zum Navigieren zu einem externen Link. Dafür sollten Sie ein normales Tag <a> verwenden. Vielleicht liegt es nur an mir, aber die meiste Zeit bin ich nicht bereit, den Unterschied zu erkennen. In anderen Fällen kann der Link dynamisch sein, das heißt, er stammt aus einer Datenbank oder einer vom Benutzer bereitgestellten Datenquelle. In diesem Fall wissen Sie nicht, ob es sich um einen externen oder internen Link handelt, und es wäre mühsam, V-if überall manuell auszuführen, wo dieser Link verwendet werden könnte.

Wäre es nicht schön, nur eine einzige Komponente zu haben, die alle internen und externen Verknüpfungen übernimmt? Wenn Sie so sind wie ich, tun Sie das gerade.

Glücklicherweise ist die Erweiterung der Komponente <router-link> ziemlich unkompliziert; binden Sie sie einfach in Ihre eigene benutzerdefinierte Komponente ein. Lassen Sie uns anfangen! Lassen Sie uns eine AppLink-Komponente erstellen, die jeden Link verarbeiten kann, egal ob extern oder intern.

AppLink-Komponenten

Als Erstes sollten wir dafür sorgen, dass unsere AppLink-Komponente alle Eigenschaften akzeptiert, die auch ein Router-Link akzeptiert. Warum? Auf diese Weise kann die „Schnittstelle“ unserer Komponente die Schnittstelle von Router Link nachahmen und wir müssen uns nicht noch eine weitere API merken. Wir können dies tun, indem wir RouterLink von Vue Router importieren und seine Props in die Props-Option unserer Komponente verteilen.

// AppLink.vue
<Skript>
importiere {RouterLink} von 'vue-router'
Standard exportieren{
  Eigenschaften: { ...RouterLink.props }
}
</Skript>

Im Vorlagenbereich können wir jetzt ein Router-Link-Tag erstellen und alle Eigenschaften unserer Komponente daran binden. Wir müssen auch den Slot übergeben, damit der zwischen den Tags bereitgestellte Text und die Markierung im Router-Link angezeigt werden.

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

Zum jetzigen Zeitpunkt haben wir alle internen Links bearbeitet. Und was ist mit externen Links? Wie bereits erwähnt, verwenden externe Links das A-Tag. Fügen wir es also zu unserer Vorlage hinzu. Wie beim Router-Link sollten wir den Steckplatz übergeben. Binden wir den href auch an das to-Attribut.

// AppLink.vue
<Vorlage>
  <a :href="zu" rel="externes Nofollow" rel="externes Nofollow" ><slot/></a>
  <router-link v-bind="$props"><slot/></router-link>
</Vorlage>

Cool, das erklärt interne und externe Verlinkung! An dieser Stelle ist es wahrscheinlich erwähnenswert, dass die obige Methode aufgrund der Einbeziehung von mehr als einem Stammelement nur in Vue 3 funktioniert.

Jetzt brauchen wir nur noch eine Bedingung, die uns mitteilt, welche Art von Link wir dem AppLink bereitstellen. Um dies zu bestimmen, können wir eine berechnete Eigenschaft namens „isExternal“ erstellen. Zuerst prüfen wir, ob der Wert unserer Eigenschaft ein String ist. Dies ist erforderlich, da die to-Eigenschaft ein Objekt sein kann, wie es manchmal an router-link übergeben wird (z. B.: to="{name:'RouteNameHere'}" ). Wir prüfen dann, ob die Zeichenfolge mit der Zeichenfolge http beginnt. Wenn beide Bedingungen erfüllt sind, verfügen wir über einen externen Link.

// AppLink.vue
<Skript>
Standard exportieren{
   //...
  berechnet:{
    istExternal(){
      Rückgabetyp von this.to === 'Zeichenfolge' und this.to.startsWith('http')
    }
  }
}
</Skript>

Der Router-Link befindet sich im Vorlagenbereich. Wir können jetzt die berechnete Eigenschaft „isExternal“ in einem v-if verwenden, wenn es sich um ein handelt, andernfalls wird „true“ angezeigt.

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

Das ist es! Wir sind fertig! Nachdem Sie die Komponente global in Ihrer Anwendung registriert haben, können Sie sie jetzt wie folgt verwenden.

// Überall in Ihrer App
<AppLink :to="[external-or-internal-link]">Klick mich</AppLink>

Mehr Flexibilität

In einer neuen Registerkarte öffnen

Lassen Sie uns unsere AppLink-Komponente nützlicher machen. Nehmen wir an, wir möchten, dass alle externen Links immer in neuen Tabs geöffnet werden. Es ist ganz einfach. Fügen Sie dem <a>-Tag in Ihrer Komponente einfach ein target="_blank" hinzu und alle externen Links auf Ihrer Site werden nun in neuen Tabs geöffnet.

// AppLink.vue
<Vorlage>
  <a ... Ziel="_blank"><Slot/></a>
  ...
</Vorlage>

Dies ist die Regel, die Sie wahrscheinlich auf die meisten externen Links auf Ihrer Site anwenden möchten. Wenn Sie jedoch möchten, dass ein bestimmter externer Link im selben Tab geöffnet wird, können Sie dies der Linkinstanz mit dem HTML-Zielattribut mitteilen.

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

Link-Sicherheit

Wenn Sie das Attribut target="_blank" verwenden, um auf eine Seite einer anderen Website zu verlinken, setzen Sie Ihre Website Leistungs- und Sicherheitsproblemen aus.

• Es kann sein, dass die verlinkte Seite letztlich im selben Prozess wie Ihre Seite ausgeführt wird. Dies kann, abhängig von der Seite, auf die verlinkt wird, zu einer Verlangsamung Ihrer eigenen Seite führen.
• Eine andere Seite kann auch über die Eigenschaft window.opener auf das ursprüngliche Seitenfenster zugreifen, was Sicherheitsprobleme verursacht.

Weitere Einzelheiten zu diesem Problem finden Sie in diesem informativen Beitrag.

Die Lösung für dieses Problem besteht darin, allen Ihren externen Link-Tags das Attribut rel="noopener" zuzuweisen. Aber denken Sie daran, wie schmerzhaft das ist … oh, Moment … das müssen wir nicht tun. Wir können es einmal in unserer AppLink-Komponente hinzufügen und das war’s.

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

Einzigartiger Stil für externe Links

Ich habe gesehen, dass einige Sites externe Links auf ihrer Site etwas anders gestalten als Links, die zu anderen Stellen auf ihrer eigenen Site führen. Dadurch können Benutzer besser nachvollziehen, wie sie auf eine Website gelangt sind, die sie ursprünglich nicht besucht haben. Dabei kann es sich um alles Mögliche handeln, von einem dezenten „Externer Link“-Symbol neben dem Link bis hin zu einem kleinen Warnhinweis unter dem Link, der beispielsweise lautet: „Links zu einer Website eines Drittanbieters.“ Die Implementierung in unserer Komponente ist ganz einfach: Fügen Sie dem a-Tag in unserer Vorlage eine externe Linkklasse hinzu und formatieren Sie diese dann mit CSS oder fügen Sie ein :after-Sudo-Element hinzu. Sie können externen Links sogar brandneue Elemente hinzufügen, etwa ein Font Awesome-Symbol.

// AppLink.vue
// (die Schriftart Font Awesome muss im Projekt enthalten sein)
<Vorlage>
  <a ... class="externer Link">
    <slot/> <i class="fas fa-external-link-alt"></i>
  </a>
  ...
</Vorlage>

<Stilbereich>
.externer-link i {
  Schriftgröße: 0,8em;
  Deckkraft: 0,7;
}
</Stil>

Zusammenfassen

Dies ist nur ein Vorgeschmack darauf, wie Sie den Router-Link erweitern können, um ihn an allgemeine und spezielle Anforderungen anzupassen. Da alle Ihre Links in einer einzigen Komponente gekapselt sind, können Sie außerdem verschiedene Aspekte aller Ihrer Links problemlos aktualisieren. Fallen Ihnen weitere nützliche Möglichkeiten zur Verbesserung unserer AppLink-Komponente ein? Verwenden Sie in Ihren Anwendungen einen ähnlichen Ansatz und können Sie einige Erkenntnisse weitergeben?

Dies ist das Ende dieses Artikels zum Erweitern von Vue Router-Links in Vue 3. Weitere relevante Inhalte zu erweiterten Vue3-Vue Router-Links finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!