vue-router-best-practices について
Vue Router のナビゲーションとルートのライフサイクルに関する実践ガイドです。Vue 開発者がよくある問題を把握し、適切なパターンを選ぶのに役立ちます。
主な機能
- 01ナビゲーションガードのパターン
- 02ルートパラメーター変更時の動作
- 03ライフサイクルとリスナーの整理
- 04本番 SPA のセットアップ指針
活用シーン
- 01API 呼び出しを待たないガードの調査
- 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 対応