vue-router-best-practices について
Vue Router の推奨プラクティスやナビゲーションパターン、よくある問題を扱うスキルです。Vue 開発者がガード、ルートのライフサイクル、本番環境の設定を扱う際に役立ちます。
主な機能
- 01ナビゲーションガードのパターン
- 02ルートパラメーター変更への対応
- 03ライフサイクルとクリーンアップの指針
- 04本番向け SPA の設定
活用シーン
- 01ナビゲーションのリダイレクトループ防止
- 02ルートパラメーター変更時のデータ更新
- 03アンマウント時のリスナー削除
- 04本番環境向け Vue SPA の設定
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/vue-router-best-practicesを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
reference/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 対応