Vue Router Best Practices
技能 已验证 活跃Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.
To help developers implement Vue Router 4 effectively by providing best practices, common patterns, and solutions for frequently encountered issues.
功能
- Vue Router 4 navigation guard patterns
- Solutions for route-component lifecycle issues
- Guidance on handling route params and navigation
- Addresses common pitfalls like infinite redirect loops
使用场景
- When implementing navigation guards in Vue Router 4
- When dealing with route param changes affecting component lifecycle
- When encountering or preventing infinite redirect loops in routing
- When ensuring proper cleanup of event listeners in route components
非目标
- General Vue.js component development
- State management solutions other than routing state
- Client-side routing for frameworks other than Vue
安装
请先添加 Marketplace
/plugin marketplace add hyf0/vue-skills/plugin install vue-skills@vue-skills质量评分
已验证类似扩展
Deepinit
100Deep codebase initialization with hierarchical AGENTS.md documentation
Cleanup Cycles
100Detect and untangle circular dependencies. Runs madge/skott (TS), pycycle (Py), or compiler-only checks (Go/Rust). Auto-fixes leaf-extractable cycles; reports core cycles for human review. Use when the user asks to find circular imports, fix dependency cycles, or untangle module graph. Example queries — "find circular imports", "fix dependency cycles", "untangle our module graph", "why is madge complaining".
Netlify Identity
100用于身份验证、用户注册、登录、密码恢复、OAuth 提供商、基于角色的访问控制或保护路由和函数。始终使用 `@netlify/identity`。切勿使用 `netlify-identity-widget` 或 `gotrue-js` — 它们已弃用。
Develop Web Game
100Use when Codex is building or iterating on a web game (HTML/JS) and needs a reliable development + testing loop: implement small changes, run a Playwright-based test script with short input bursts and intentional pauses, inspect screenshots/text, and review console errors with render_game_to_text.
Sentry React Router Framework Sdk
100Full Sentry SDK setup for React Router Framework mode. Use when asked to "add Sentry to React Router Framework", "install @sentry/react-router", or configure error monitoring, tracing, profiling, session replay, logs, or user feedback for a React Router v7 framework app.
Create Adaptable Composable
100Create a library-grade Vue composable that accepts maybe-reactive inputs (MaybeRef / MaybeRefOrGetter) so callers can pass a plain value, ref, or getter. Normalize inputs with toValue()/toRef() inside reactive effects (watch/watchEffect) to keep behavior predictable and reactive. Use this skill when user asks for creating adaptable or reusable composables.