vue-router について
Vue 3 または Vue 2 を使う開発者向けに、Vue Router の設定方法とベストプラクティスをまとめたスキルです。ルート、ナビゲーションガード、動的ルート、遅延読み込みを扱います。
主な機能
- 01ルートと history モードの設定
- 02router-link と router-view の利用
- 03動的ルートとネストされたルートの設定
- 04ガードへのアクセス制御の集約
- 05ページコンポーネントの遅延読み込み
活用シーン
- 01Vue プロジェクトへのルーティング追加
- 02権限に応じたページアクセス制御
- 03大きなページのオンデマンド読み込み
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/インストール後、Claude Code で/vue-routerを入力して読み込まれたか確認します。
同梱ファイルagents/openai.yamlLICENSE.txt
詳細
このスキルを使用するタイミング
次のような場合に、このスキルを使用してください。
- Vue プロジェクトでルーティング、動的ルーティング、ガード、遅延読み込みを設定する
- Vue Router 4（Vue 3）または 3.x（Vue 2）の API を使用する
このスキルの使用方法
- 設定：createRouter、routes、history モード、router-link、router-view、useRouter。
- 応用：動的ルーティング、ネストされたルーティング、beforeEach ガード、meta、遅延読み込み component: () => import()。
- 参考：https://router.vuejs.org/
ベストプラクティス
- ルーティングと権限はガードで一元管理し、大きなページは遅延読み込みします。
- 名前付きルートと params/query のルールを定め、ルーティングに機密データを保存しないようにします。
キーワード
vue router, ルーティング, ガード, Vue 3, Vue 2
コメント
Markdown 対応