vue-router-best-practices — скилл для Claude Code: навигация
Скилл обучает ИИ-кодера правилам Vue Router 4: навигационные гварды, обработка параметров маршрутов и синхронизация с жизненным циклом компонента. Помогает избежать бесконечных редиректов, утечек памяти и рассинхронизации данных.
npx skills add vuejs-ai/skills --skill vue-router-best-practices -a claude-codeЧто делает vue-router-best-practices
Скилл содержит паттерны для навигационных гвардов (beforeRouteEnter, beforeRouteLeave), правильной работы с async/await в гвардах и обработки перехода между маршрутами с разными параметрами. Охватывает типичные ошибки: забытый await в guard, использование устаревшей функции next(), обработчики события, оставшиеся после размонтирования компонента.
От установки скилла кодер получит рекомендации по использованию Vue Router 4 в production-приложениях, распознавание паттернов бесконечных петель редиректов и способы синхронизации данных при смене параметров маршрута — всё это встроится в подсказки Claude Code, Cursor или другого поддерживаемого редактора при написании роутера.
Какие задачи решает
- Избежать бесконечные циклы редиректов в навигационных гвардах
- Синхронизировать данные компонента при изменении параметров маршрута
- Удалить event listeners перед размонтированием компонента
- Правильно использовать async/await в beforeRouteEnter и других гвардах
- Перейти с устаревшей функции next() на современный синтаксис Vue Router 4
Примеры запросов агенту
- Напиши навигационный guard, который загружает данные перед входом в маршрут и обрабатывает ошибки сети
- Покажи, как обновить компонент, когда меняется параметр маршрута, но сам маршрут остаётся тем же
- Помоги настроить очистку event listeners при переходе на другой маршрут
Как установить vue-router-best-practices
1Через Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-router-best-practices -a claude-code2Вручную: положить файлы
~/.claude/skills/vue-router-best-practices/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/vue-router-best-practices/
1Через Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-router-best-practices -a codex2Вручную: положить файлы
.agents/skills/vue-router-best-practices/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-router-best-practices -a cursor2Вручную: положить файлы
.cursor/skills/vue-router-best-practices/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install vuejs-ai/skills vue-router-best-practices2Вручную: положить файлы
.github/skills/vue-router-best-practices/SKILL.md1Через Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-router-best-practices -a gemini-cli2Командой платформы
gemini skills install https://github.com/vuejs-ai/skills --path skills/vue-router-best-practicesВручную: положить файлы
.devin/skills/vue-router-best-practices/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add vuejs-ai/skills --skill vue-router-best-practices -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора7
Весь набор →Похожие
Вопросы о vue-router-best-practices
Как установить vue-router-best-practices в Claude Code?
Выполни npx skills add vuejs-ai/skills --skill vue-router-best-practices -a claude-code, затем открой ~/.claude/skills/vue-router-best-practices/SKILL.md. Для других редакторов команда отличается (см. Cursor, Codex или GitHub Copilot в списке).
Что делает этот скилл?
Учит ИИ-кодера правилам Vue Router 4: как писать навигационные гварды, работать с параметрами маршрутов, синхронизировать состояние компонента и избегать утечек памяти.
Работает ли скилл со всеми редакторами?
Да, поддерживает Claude Code, Cursor, Codex, GitHub Copilot, Gemini CLI и OpenCode. Каждый редактор требует своей команды установки.
Исходный текст
SKILL.md · MIT
--- name: vue-router-best-practices description: "Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions." version: 1.0.0 license: MIT author: github.com/vuejs-ai --- Vue Router best practices, common gotchas, and navigation patterns. ### Navigation Guards - Navigating between same route with different params → See [router-beforeenter-no-param-trigger](reference/router-beforeenter-no-param-trigger.md) - Accessing component instance in beforeRouteEnter guard → See [router-beforerouteenter-no-this](reference/router-beforerouteenter-no-this.md) - Navigation guard making API calls without awaiting → See [router-guard-async-await-pattern](reference/router-guard-async-await-pattern.md) - Users trapped in infinite redirect loops → See [router-navigation-guard-infinite-loop](reference/router-navigation-guard-infinite-loop.md) - Navigation guard using deprecated next() function → See [router-navigation-guard-next-deprecated](reference/router-navigation-guard-next-deprecated.md) ### Route Lifecycle - Stale data when navigating between same route → See [router-param-change-no-lifecycle](reference/router-param-change-no-lifecycle.md) - Event listeners persisting after component unmounts → See [router-simple-routing-cleanup](reference/router-simple-routing-cleanup.md) ### Setup - Building production single-page application → See [router-use-vue-router-for-production](reference/router-use-vue-router-for-production.md)
© github.com/vuejs-ai · MIT · vuejs-ai/skills
