Does it address component lifecycle issues?

Yes, the skill includes guidance on managing component instances within guards and ensuring event listeners are cleaned up after unmounting.

Does this skill support Vue Router 3?

This skill is optimized for Vue Router 4 and Vue 3, specifically focusing on modern patterns and migrating away from deprecated Vue Router 3 methods.

Can it help fix infinite redirect loops?

Yes, it provides specific implementation patterns to identify and resolve logic errors that cause infinite loops within navigation guards.

How does it handle asynchronous data fetching in guards?

It provides standardized async/await patterns for navigation guards to ensure API calls are properly resolved before the route completes its transition.

Vue Router Best Practices

Name: Vue Router Best Practices
Author: vuejs-ai

byvuejs-ai

•

1,280

•

학습 및 문서화

Optimizes Vue 3 routing implementations with expert patterns for navigation guards, lifecycle management, and production-ready SPA architectures.

The Vue Router Best Practices skill equips Claude with specialized knowledge for implementing robust routing logic in Vue 3 applications using Vue Router 4. It focuses on solving complex routing challenges such as handling same-route parameter changes, preventing infinite redirect loops in navigation guards, and transitioning away from deprecated patterns like the next() function. By providing specific guidance on route-component lifecycle interactions and asynchronous guard patterns, this skill ensures developers can build scalable, high-performance single-page applications with clean, maintainable code.

주요 기능

011,280 GitHub stars

02Migration guidance for replacing deprecated next() functions

03Prevention strategies for infinite navigation redirect loops

04Advanced Navigation Guard patterns including async/await implementation

05Memory leak prevention through proper route-component cleanup

06Solutions for stale data issues during same-route parameter changes

사용 사례

01Implementing reactive data updates when navigating between dynamic route segments

02Debugging and resolving complex authentication redirect loops in navigation guards

03Refactoring legacy routing logic to follow Vue Router 4 and Vue 3 composition standards

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add vuejs-ai/skills vue-router-best-practices

For use in Claude.ai and ChatGPT

Download Skill