vue-router-best-practices について
Vue Routerを使うプロジェクト向けの実践ガイドです。ナビゲーションガード、ルートのライフサイクル、本番環境の設定に関する注意点を扱います。
主な機能
- 01ナビゲーションガードの注意点
- 02ルートパラメーター変更への対応
- 03アンマウント時のリスナー整理
- 04本番向けSPAの設定
活用シーン
- 01ルートパラメーター変更時の遷移問題の調査
- 02非同期ガードやリダイレクトループの回避
- 03ルートコンポーネント破棄後のリスナー整理
インストール
コマンドをコピーしてターミナルで実行します。
$
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 対応