vue-router-best-practices

Überblick über den Skill vue-router-best-practices

Wobei vue-router-best-practices hilft

Der Skill vue-router-best-practices ist ein fokussierter Leitfaden für Troubleshooting und Implementierung mit Vue Router 4 – besonders bei Navigation Guards, Änderungen von Route-Parametern und dem Lifecycle-Verhalten von Route-Komponenten. Am nützlichsten ist er, wenn deine App bereits Vue 3 + Vue Router nutzt und du schnell korrekte Muster brauchst, statt allgemeiner Framework-Ratschläge.

Für wen sich die Installation dieses Skills lohnt

Dieser Skill passt zu Frontend-Entwickler:innen, die:

• authentifizierte oder berechtigungsabhängige Routen ausrollen
• veraltete Daten debuggen, wenn sich nur Route-Parameter ändern
• älteren Guard-Code migrieren, der noch next() verwendet
• Redirect-Schleifen und stille Routing-Bugs vermeiden wollen

Wenn dein eigentlicher Job lautet: „Routing in Production sicher und vorhersehbar machen“, ist dieser Skill die bessere Wahl als ein allgemeiner Vue-Prompt.

Warum dieser Skill mehr bringt als ein generischer Prompt

Der Wert von vue-router-best-practices liegt darin, dass er sich auf eine kleine Zahl besonders folgenreicher Vue-Router-Fallstricke konzentriert, die echte Apps regelmäßig aus dem Tritt bringen:

• beforeEnter wird bei Param- oder Query-Updates nicht erneut ausgeführt
• beforeRouteEnter hat keinen Zugriff auf this
• asynchrone Guard-Logik blockiert die Navigation in Wirklichkeit nicht
• Endlosschleifen bei Redirects in globalen Guards
• veralteter Komponenten-State, wenn sich Route-Parameter ändern
• überholte next()-Muster in Vue Router 4

Dadurch ist der Skill besonders hilfreich für Bugfixing, Code Reviews und Migrationsarbeit.

Was dieser Skill bewusst nicht abdeckt

Das ist weder ein vollständiger Vue-Router-Kurs noch eine API-Referenz oder ein Architekturleitfaden für alle Router-Modi. Der Skill ist absichtlich eng zugeschnitten: Er hilft bei praktischen Korrektheitsproblemen, die sich direkt auf das reale Navigationsverhalten auswirken.

So nutzt du den Skill vue-router-best-practices

Installationskontext für vue-router-best-practices

Nutze vue-router-best-practices in einem AI-Coding-Workflow, in dem das Modell deine Router-Konfiguration, Route-Komponenten und Guard-Logik einsehen kann. Der Skill selbst liegt in skills/vue-router-best-practices im Repository vuejs-ai/skills:

• SKILL.md
• reference/router-beforeenter-no-param-trigger.md
• reference/router-beforerouteenter-no-this.md
• reference/router-guard-async-await-pattern.md
• reference/router-navigation-guard-infinite-loop.md
• reference/router-navigation-guard-next-deprecated.md
• reference/router-param-change-no-lifecycle.md
• reference/router-simple-routing-cleanup.md
• reference/router-use-vue-router-for-production.md

Wenn deine Plattform die Installation von Skills unterstützt, nutze den üblichen Add-/Import-Flow für das Repo und wähle anschließend vue-router-best-practices aus.

Diese Dateien solltest du vor dem Prompt zuerst lesen

Für den schnellsten Einstieg lies in dieser Reihenfolge:

1. SKILL.md
2. reference/router-navigation-guard-next-deprecated.md
3. reference/router-navigation-guard-infinite-loop.md
4. reference/router-param-change-no-lifecycle.md
5. reference/router-beforeenter-no-param-trigger.md

Diese Lesereihenfolge zeigt zuerst die riskantesten Fehlerquellen: kaputter Guard-Control-Flow, Redirect-Schleifen und veraltete, routegetriebene Daten.

Welche Eingaben der Skill braucht

Der vue-router-best-practices skill arbeitet am besten, wenn du konkreten Routing-Code lieferst und nicht nur ein Symptom beschreibst. Gute Eingaben sind zum Beispiel:

• router/index.ts oder router.ts
• Route-Records mit meta
• globale Guards wie beforeEach
• Guards innerhalb von Komponenten
• Komponenten, die über dynamische Routen wie /users/:id gerendert werden
• eine kurze Reproduktion davon, was die Navigation tun sollte und was sie aktuell tut

Ohne Code wird die Ausgabe allgemeiner und deutlich weniger belastbar.

So machst du aus einem vagen Problem einen starken Prompt

Schwacher Prompt:

• „My Vue Router is buggy. Help.”

Starker Prompt:

• „Use vue-router-best-practices to review this Vue Router 4 setup. When navigating from /orders/1 to /orders/2, access checks do not rerun and stale order data remains visible. We use a route-level beforeEnter, an async beforeEach, and onMounted in OrderDetail.vue. Identify the bug sources, explain which Vue Router behaviors are causing them, and rewrite the guards and component logic using Vue Router 4 return-based patterns.”

Diese Version gibt dem Modell genug Struktur, um die passende Referenzdatei anzuwenden und eine brauchbare Lösung zu liefern.

Bester Workflow für die Nutzung von vue-router-best-practices

Ein praxistauglicher Workflow:

1. Füge die fehlerhafte Route-Konfiguration und den Guard-Code ein.
2. Beschreibe exakt, welcher Navigationspfad fehlschlägt.
3. Bitte das Modell, dein Problem einem bekannten Fallstrick zuzuordnen.
4. Fordere eine korrigierte Implementierung an.
5. Bitte anschließend um eine kurze Test-Checkliste für direkten Aufruf, Param-Änderungen auf derselben Route, Redirects und unberechtigten Zugriff.

Dieser Workflow ist besser, als abstrakt nach „Best Practices“ zu fragen, denn die meisten Vue-Router-Bugs hängen stark vom konkreten Szenario ab.

Einsatzfälle, in denen dieser Skill besonders stark ist

Die besten Einsatzfälle für vue-router-best-practices sind:

• Auth- und rollenbasiertes Routing
• Detailseiten, die von Route-Parametern abhängen
• Cleanup bei Migrationen von Vue Router 3 auf 4
• Debugging wiederverwendeter Komponenteninstanzen
• Ablösung fragiler next()-Kontrollflüsse
• Prüfung, ob Guard-Logik global, pro Route oder in der Komponente liegen sollte

Häufige Muster, die der Skill korrigieren kann

Dieser Skill hilft dir typischerweise bei der Entscheidung zwischen:

• beforeEach vs beforeEnter vs onBeforeRouteUpdate
• watch(() => route.params.id) vs erzwungenem Remount mit :key
• return-basierten Guards vs veraltetem next()
• Datenabruf auf Komponentenebene vs Guard-basierte Vorabprüfungen
• Vue Router vs einfachem Hash-Routing für Produktions-Apps

Das sind echte Implementierungsentscheidungen und keine bloßen Stilfragen.

Praktische Prompt-Vorlage für bessere Ergebnisse

Nutze diese Vorlage für bessere Ergebnisse mit dem vue-router-best-practices guide:

• “Use vue-router-best-practices on this Vue 3 app.”
• “Environment: Vue 3, Vue Router 4, Composition API.”
• “Problem: [describe exact navigation bug].”
• “Expected behavior: [what should happen].”
• “Current behavior: [what actually happens].”
• “Files: [paste router config and affected component].”
• “Please: identify the Vue Router gotcha, explain why it happens, propose the safest fix, and include edge cases to test.”

Tipps, die die Ergebnisqualität spürbar verbessern

Gib dem Modell nach Möglichkeit diese Details mit:

• ob sich der Pfad ändert oder nur Params/Query
• ob die Komponente über mehrere IDs hinweg wiederverwendet wird
• ob Auth synchron ist oder über eine API läuft
• ob du Options API oder Composition API verwendest
• ob der Code noch von next() abhängt

Diese Details entscheiden direkt darüber, welche Hinweise zur vue-router-best-practices install und Nutzung tatsächlich passen.

FAQ zum Skill vue-router-best-practices

Ist vue-router-best-practices gut für Einsteiger:innen geeignet

Ja, wenn du die Vue-Grundlagen bereits kennst und Hilfe bei Routing-Verhalten brauchst, das nicht sofort offensichtlich ist. Es ist keine Schritt-für-Schritt-Einführung in Vue Router, aber für typische Produktionsfehler einsteigerfreundlich, weil die Referenzen auf konkrete Bugs und deren Behebung ausgerichtet sind.

Wann sollte ich das statt eines normalen Coding-Prompts verwenden

Nutze vue-router-best-practices, wenn das Problem Route-Wechsel, Guard-Timing, wiederverwendete Route-Komponenten oder Redirect-Verhalten betrifft. Ein normaler Prompt kann plausiblen Code vorschlagen, aber dieser Skill erkennt mit höherer Wahrscheinlichkeit Vue-Router-spezifische Randfälle – etwa dass Navigationen, bei denen sich nur Params ändern, beforeEnter nicht erneut auslösen.

Deckt dieser Skill speziell Vue Router 4 ab

Ja. Das Quellmaterial zielt ausdrücklich auf Muster in Vue Router 4 ab, einschließlich der Migration weg vom veralteten next()-Stil hin zu return-basierten Guards.

Welche größten Risiken hilft er zu vermeiden

Die wertvollsten Probleme, die er verhindern hilft, sind:

• unberechtigter Zugriff, weil Guards nicht erneut ausgeführt werden
• veraltete Seitendaten bei Param-Änderungen
• hängende oder fehlerhaft auslösende asynchrone Navigationsprüfungen
• unendliche Redirect-Schleifen
• Missverständnisse beim Lifecycle in beforeRouteEnter

Wann ist dieser Skill keine gute Wahl

Überspringe diesen Skill, wenn dein Problem vor allem eines davon ist:

• SSR-Routing mit frameworkspezifischen Abstraktionen
• allgemeine Vue-Komponentenarchitektur ohne Bezug zur Navigation
• ein vollständiges Routing-Tutorial von Grund auf
• Frontend-Routing-Bibliotheken außerhalb von Vue

Es ist ein gezielter Skill vue-router-best-practices for Frontend Development, kein universelles Routing-Handbuch.

So verbesserst du den Skill vue-router-best-practices

Gib Navigationsszenarien an, nicht nur Code-Blöcke

Um die Ausgaben von vue-router-best-practices zu verbessern, beschreibe den genauen Route-Wechsel:

• von welcher URL
• zu welcher URL
• ob sich nur Params/Query geändert haben
• ob der Nutzer umgeleitet, blockiert oder zugelassen werden soll

Das ist wichtig, weil viele Vue-Router-Bugs nur auf einem bestimmten Navigationspfad sichtbar werden.

Füge sowohl Router- als auch Komponenten-Code ein

Ein häufiger Fehler ist, nur die halbe Ursache zu analysieren. Zum Beispiel kann ein Route-Guard korrekt sein, während die Komponente weiterhin auf onMounted setzt und nach einem Wechsel von /users/1 zu /users/2 veraltete Daten anzeigt. Füge beide Dateien ein, damit der Skill Guard-Logik und Komponenten-Lifecycle zusammen betrachten kann.

Bitte um eine Entscheidung, nicht nur um einen Fix

Besserer Prompt:

• “Should this logic live in beforeEach, beforeEnter, onBeforeRouteUpdate, or a watch, and why?”

Das liefert stärkere Ergebnisse als „fix this bug“, weil der Skill besonders nützlich ist, wenn es darum geht, die richtige Routing-Ebene zu wählen.

Achte auf diese typischen Fehlermuster

Die häufigsten Punkte, die du nach der ersten Antwort prüfen solltest:

• der Fix geht weiterhin davon aus, dass beforeEnter bei Param-Änderungen läuft
• die Lösung mischt next() mit return-basierten Mustern
• der Auth-Redirect kann immer noch auf die aktuelle Route zeigen
• asynchrone Checks werden zwar awaited, aber Fehler/Timeouts werden nicht behandelt
• veraltete Daten werden per erzwungenem Remount behoben, obwohl ein schlankeres watch ausreichen würde

Bitte nach dem Patch um eine Test-Checkliste

Ein guter Verbesserungsschritt ist:

• “Now give me a minimal test checklist for direct visit, authenticated visit, unauthenticated redirect, same-route param change, query change, and invalid ID.”

Das ist besonders wichtig bei der Nutzung des vue-router-best-practices skill, weil viele Routing-Bugs erst sichtbar werden, nachdem der erste Happy Path funktioniert.

Nutze die Referenzen als gezielte Review-Hilfen

Nachdem du eine erste Antwort bekommen hast, bitte das Modell, sie gegen die passendste Referenz zu validieren:

• router-beforeenter-no-param-trigger.md
• router-navigation-guard-infinite-loop.md
• router-param-change-no-lifecycle.md

Dieser zweite Durchgang entdeckt oft subtile Fehler und erhöht die Sicherheit, bevor du Routing-Code in Production änderst.