Toolverse
All skills

vue-router-best-practices

by antfu

Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

Installation

Pick a client and clone the repository into its skills directory.

Installation

Quick info

Author
antfu
Category
Frontend
Views
16

About this skill

Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

How to use

  1. Zainstaluj skill w swoim projekcie Vue Router 4, dodając go do konfiguracji agenta lub IDE obsługującego umiejętności.

  2. Zapoznaj się z sekcją Navigation Guards, aby zrozumieć typowe problemy: jak obsługiwać nawigację między trasami z różnymi parametrami, jak unikać pułapek z dostępem do instancji komponentu w beforeRouteEnter, oraz jak prawidłowo czekać na asynchroniczne operacje w strażnikach.

  3. Przejrzyj referencje dotyczące cyklu życia tras – zwróć szczególną uwagę na problem ze starymi danymi przy nawigacji między tą samą trasą i na czyszczenie słuchaczy zdarzeń po odmontowaniu komponentu.

  4. Sprawdź dokumentację dotyczącą przestarzałej funkcji next() w strażnikach nawigacji i dowiedz się, jak ją zastąpić nowoczesnymi podejściami.

  5. Zapoznaj się z wytycznymi do budowania produkcyjnych aplikacji jednostronicowych z Vue Router, aby uniknąć pętli przekierowań i innych problemów w środowisku produkcyjnym.

  6. Zastosuj opisane wzorce w swoim kodzie, testując każdy scenariusz nawigacji, aby upewnić się, że komponenty prawidłowo reagują na zmiany parametrów tras.

Related skills

apple-reminders

by openclaw

Manage Apple Reminders via the `remindctl` CLI on macOS (list, add, edit, complete, delete). Supports lists, date filters, and JSON/plain output.

Frontend
2085

web-research

by langchain-ai

Use this skill for requests related to web research; it provides a structured approach to conducting comprehensive web research

Frontend
18114

brainstorming

by obra

Use when creating or developing, before writing code or implementation plans - refines rough ideas into fully-formed designs through collaborative questioning, alternative exploration, and incremental validation. Don't use during clear 'mechanical' processes

Frontend
49170

livewire-development

by spatie

Develops reactive Livewire 4 components. Activates when creating, updating, or modifying Livewire components; working with wire:model, wire:click, wire:loading, or any wire: directives; adding real-time updates, loading states, or reactivity; debugging component behavior;

Frontend
2335

angular

by sickn33

Modern Angular (v20+) expert with deep knowledge of Signals, Standalone Components, Zoneless applications, SSR/Hydration, and reactive patterns. Use PROACTIVELY for Angular development, component architecture, state management, performance optimization, and migration to modern

Frontend
2656

theme-factory

by anthropics

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

Frontend
40139