vue-router-best-practices について
Vue Router 開発者向けに、ナビゲーションのパターンとよくある問題を解説するスキルです。ナビゲーションガード、ルートのライフサイクル、SPA の本番構成を扱います。
主な機能
- 01ナビゲーションガードのパターン
- 02非同期ガードの処理
- 03リダイレクトループの対処
- 04ルートパラメーターのライフサイクル
- 05コンポーネント破棄時のクリーンアップ
- 06本番 SPA の構成
活用シーン
- 01パラメーター変更を伴うルート遷移への対応
- 02ガードによるリダイレクトループの防止
- 03ルートコンポーネント破棄時のリスナー整理
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/vue-router-best-practicesを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
LICENSE.mdSYNC.mdreference/router-beforeenter-no-param-trigger.mdrouter-beforerouteenter-no-this.mdrouter-guard-async-await-pattern.mdrouter-navigation-guard-infinite-loop.mdrouter-navigation-guard-next-deprecated.mdrouter-param-change-no-lifecycle.mdrouter-simple-routing-cleanup.mdrouter-use-vue-router-for-production.md詳細
Vue Router のベストプラクティス、よくある落とし穴、ナビゲーションのパターンです。
ナビゲーションガード
- 異なるパラメーターで同じルートに移動する → router-beforeenter-no-param-trigger を参照してください
- beforeRouteEnter ガードでコンポーネントインスタンスにアクセスする → router-beforerouteenter-no-this を参照してください
- ナビゲーションガードで API 呼び出しを await せずに実行する → router-guard-async-await-pattern を参照してください
- ユーザーが無限リダイレクトループに陥る → router-navigation-guard-infinite-loop を参照してください
- ナビゲーションガードで非推奨の next() 関数を使用する → router-navigation-guard-next-deprecated を参照してください
ルートのライフサイクル
- 同じルート間の移動時にデータが古いままになる → router-param-change-no-lifecycle を参照してください
- コンポーネントのアンマウント後もイベントリスナーが残る → router-simple-routing-cleanup を参照してください
セットアップ
- 本番用のシングルページアプリケーションを構築する → router-use-vue-router-for-production を参照してください
コメント
Markdown 対応