المهارات vue-router-best-practices
📦

vue-router-best-practices

آمن

Применение лучших практик Vue Router

متاح أيضًا من: github.com/vuejs-ai

Охранники навигации и шаблоны жизненного цикла Vue Router часто вызывают ошибки, которые трудно отладить. Этот скилл предоставляет проверенные решения для распространённых задач Vue Router 4, включая реализацию охранников, изменение параметров маршрута и очистку компонентов.

يدعم: Claude Codex Code(CC)
📊 70 كافٍ
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "vue-router-best-practices". Как обрабатывать изменение параметров маршрута так, чтобы мой компонент корректно обновлялся?

النتيجة المتوقعة:

  • По умолчанию изменение параметров маршрута не перезапускает охранники навигации в Vue Router 4.
  • Чтобы обработать изменение параметров:
  • 1. Используйте компонент onBeforeRouteUpdate или хук обновления
  • 2. Наблюдайте за параметрами маршрута и повторно получайте данные
  • 3. Используйте изменения ключа на router-view: <router-view :key="$route.fullPath" />

استخدام "vue-router-best-practices". Каков правильный способ использования охранника beforeRouteEnter?

النتيجة المتوقعة:

  • Охранник beforeRouteEnter выполняется до создания компонента, поэтому 'this' не определён.
  • Используйте обратный вызов next(vm) для доступа к экземпляру компонента после его создания:
  • beforeRouteEnter(to, from, next) {
  • next(vm => { vm.someProperty = 'value' })
  • }
  • Для Vue 3 с composition API рассмотрите использование onBeforeRouteUpdate или onBeforeRouteLeave вместо.

التدقيق الأمني

آمن
v1 • 2/7/2026

This is a documentation-only skill containing reference guides for Vue Router 4 best practices. All static findings are false positives caused by the analyzer detecting code examples within markdown documentation files. The 'external_commands' detections are backtick-delimited code blocks in documentation, not shell execution. The 'network' detections are hardcoded documentation URLs. The 'scripts' detections are import() syntax in code examples. No executable code exists that could pose security risks.

9
الملفات التي تم فحصها
1,512
الأسطر التي تم تحليلها
0
النتائج
1
إجمالي عمليات التدقيق
لا توجد مشكلات أمنية
تم تدقيقه بواسطة: claude

درجة الجودة

38
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
31
المجتمع
100
الأمان
83
الامتثال للمواصفات

ماذا يمكنك بناءه

Исправление ошибок охранников навигации

Отладка и исправление распространённых проблем охранников навигации Vue Router, таких как отсутствие срабатывания охранников при изменении параметров или бесконечные циклы перенаправления.

Изучение правильных паттернов охранников

Понимание корректного способа реализации охранников навигации, включая асинхронные операции и доступ к жизненному циклу компонента.

Управление жизненным циклом маршрута

Корректная обработка переходов между маршрутами, включая очистку прослушивателей событий, подписок и состояния компонента.

جرّب هذه الموجهات

Базовая проблема с охранником навигации 
Мой охранник навигации Vue Router не срабатывает, когда я перехожу между одним и тем же маршрутом с разными параметрами. Компонент не обновляется. Как это исправить?
Доступ к компоненту в охраннике 
Мне нужно получить доступ к экземпляру компонента в моём охраннике beforeRouteEnter для задания данных, но 'this' недоступен. Каков правильный паттерн для Vue Router 4?
Реализация асинхронного охранника 
Как правильно использовать async/await в охраннике навигации Vue Router для получения данных перед разрешением навигации? Что произойдёт, если запрос не удастся?
Предотвращение бесконечных циклов 
Мой охранник навигации продолжает перенаправлять пользователей в бесконечный цикл. Как определить и предотвратить этот паттерн в Vue Router 4?

أفضل الممارسات

  • Используйте хуки onBeforeRouteUpdate и onBeforeRouteLeave для обработки изменений маршрута на уровне компонента вместо reliance solely на охранники навигации
  • Всегда возвращайте Promise или используйте обратный вызов next() в охранниках для обеспечения правильного управления потоком навигации
  • Очищайте подписки, таймеры и прослушиватели событий в onBeforeRouteLeave для предотвращения утечек памяти

تجنب

  • Использование устаревшей функции next() в Vue Router 4 — используйте return promises или флаги bool вместо
  • Зависимость от beforeRouteEnter для доступа к состоянию компонента — используйте хуки composition API вместо
  • Не обработка ошибок API в асинхронных охранниках навигации, что может оставить пользователей висеть на экранах загрузки

الأسئلة المتكررة

Почему мой охранник навигации не срабатывает при изменении параметров?
Охранники навигации срабатывают только при явной навигации. При переходе между одним маршрутом с разными параметрами Vue Router считает это одним и тем же маршрутом. Используйте onBeforeRouteUpdate или наблюдайте за параметрами маршрута для обработки этих изменений.
Как получить доступ к данным компонента в охраннике beforeRouteEnter?
Охранник beforeRouteEnter выполняется до создания компонента, поэтому 'this' не определён. Используйте обратный вызов next(vm) для доступа к экземпляру компонента после его создания.
Что вызывает бесконечные циклы перенаправления в Vue Router?
Бесконечные циклы возникают, когда охранник перенаправляет на маршрут, который снова вызывает тот же охранник, создавая цикл. Проверьте логику охранника на условия, которые не могут быть удовлетворены или всегда возвращают true для целевого маршрута.
Как правильно очиститься при уходе с маршрута?
Используйте хук onBeforeRouteLeave или охранник beforeRouteLeave для удаления прослушивателей событий, отмены ожидающих запросов, очистки таймеров и отписки от магазинов или сервисов.
Должен ли я использовать охранники навигации или хуки жизненного цикла компонента?
Используйте охранники для решений на уровне маршрута, таких как аутентификация и авторизация. Используйте хуки жизненного цикла компонента для очистки и получения данных, зависящих от параметров маршрута.
Каков аналог устаревшей функции next() в Vue Router 4?
Вместо вызова next() возвращайте Promise, используйте async/await или возвращайте false для отмены навигации. Для перенаправлений выбрасывайте Error с именем маршрута, используя функцию перенаправления createRouter.

تفاصيل المطور

المؤلف

github.com/vuejs-ai

الترخيص

MIT

المستودع

https://github.com/vuejs-ai/skills/tree/main/skills/vue-router-best-practices/

مرجع

main

بنية الملفات

📁 reference/

📄 router-beforeenter-no-param-trigger.md

📄 router-beforerouteenter-no-this.md

📄 router-guard-async-await-pattern.md

📄 router-navigation-guard-infinite-loop.md

📄 router-navigation-guard-next-deprecated.md

📄 router-param-change-no-lifecycle.md

📄 router-simple-routing-cleanup.md

📄 router-use-vue-router-for-production.md

📄 SKILL.md