Navigation in Nuxt 3: Ein praktischer Leitfaden zur NuxtLink-Komponente

Navigation in Nuxt 3: Ein praktischer Leitfaden zur NuxtLink-Komponente

In der modernen Webentwicklung sind Geschwindigkeit und Reaktionsfähigkeit der Benutzeroberfläche entscheidend. Benutzer müssen blitzschnell zwischen Kundenkarten, Deals und Berichten wechseln können. Die NuxtLink-Komponente in Nuxt 3 ermöglicht dies mühelos – sie fungiert automatisch als clientseitige Navigation, lädt benötigte Daten vor und bewahrt dabei die Vorteile des Universal Renderings.

1. Ersetzen herkömmlicher Links
   Anstelle des standardmäßigen - Tags

<a href="/customers">Clients</a>

wir benutzen einfach

<NuxtLink to="/customers">Clients</NuxtLink>

Das sorgt für einen sofortigen Übergang, ohne die Seite komplett neu zu laden.

2. Beispiel: Übergang zum Kundenprofil
   Stellen wir uns vor, man muss in der Kundenliste klicken, um die Kundenkarte mit der ID=42 zu öffnen:

<template v-for="client in clients" :key="client.id">
  <li>
    <NuxtLink :to="/customers/${client.id}">
      {{ client.name }}
    </NuxtLink>
  </li>
</template>

Der Nutzer sieht eine Liste, klickt darauf, und die Profildaten werden clientseitig ohne zusätzliche Anfragen nachgeladen.

3. Externe Links und Sicherheit (Integration eines externen Berichts)
   Um einen Manager zu einem Bericht in Google Analytics weiterzuleiten, verwenden wir NuxtLink mit dem Attribut external:

<NuxtLink
  to="https://analytics.google.com/report"
  external
>
  Go To Analytics
</NuxtLink>

NuxtLink fügt automatisch rel="noopener noreferrer" zum Schutz vor Sicherheitslücken hinzu.

4. Öffnen in einem neuen Tab (Verkaufsberichte)
   Oft ist es praktisch, Finanzberichte in einem separaten Tab anzusehen:

<NuxtLink
  to="/reports/sales"
  target="_blank"
>
  Sales Report
</NuxtLink>

Der Browser öffnet einen neuen Tab, wobei die interne Logik von RouterLink erhalten bleibt.

5. Vorabladen von Seiten (schneller Zugriff auf das Kundenprofil)
   Damit die Karte für Kunde 42 bereits vorab geladen wird, sobald sie in den sichtbaren Bereich gelangt:

<NuxtLink
  :to="/customers/${client.id}"
  prefetch
>
  {{ client.name }}
</NuxtLink>

Diese Option ist standardmäßig aktiviert. Wenn Sie jedoch das Vorabladen für eine bestimmte Liste deaktivieren möchten:

<NuxtLink :to="/customers/${client.id}" :prefetch="false">...</NuxtLink>
<!-- oder -->
<NuxtLink :to="/customers/${client.id}" no-prefetch>...</NuxtLink>

Zum Debuggen kann man die CSS-Klasse für Prefetching festlegen:

<NuxtLink
  to="/customers/42"
  prefetched-class="is-prefetched"
>
  View Client
</NuxtLink>

Aktivieren Sie dies nur in der Entwicklungsumgebung, um den Prozess verfolgen zu können.

6. Eigene Link-Komponente für das CRM
   Um zu vermeiden, dieselben Einstellungen im gesamten Projekt zu wiederholen, können Sie die Komponente MyCrmLink erstellen:

// ~/components/MyCrmLink.ts
export default defineNuxtLink({
  componentName: 'MyCrmLink',
  activeClass: 'crm-link--active',
  prefetchedClass: process.env.NODE_ENV === 'development'
    ? 'crm-link--prefetched'
    : undefined
});

Ab sofort schreiben wir überall:

<MyCrmLink to="/customers">Clients</MyCrmLink>

und erhalten automatisch ein einheitliches Design sowie die benötigten Klassen.

Fazit

NuxtLink ist ein unverzichtbares Werkzeug für jedes System, das auf Nuxt3 basiert. Es sorgt für eine reibungslose Navigation, beschleunigt den Zugriff auf wichtige Bereiche und gewährleistet Sicherheit im Umgang mit externen Diensten. Verwenden Sie die fertige Komponente oder erstellen Sie Ihre eigene auf Basis von defineNuxtLink, damit die Navigation in Ihrem CRM schnell, benutzerfreundlich und konsistent ist.