Vue Router 4の基本的な使い方から、ナビゲーションガード、ルートパラメータ、コンポーネントのライフサイクルなど、Vue.jsにおける画面遷移をより効率的に実装するためのベストプラクティスを習得するSkill。
Vue Router 4におけるパターン、ナビゲーションガード、ルートパラメータ、ルートとコンポーネントのライフサイクル間の相互作用を解説するSkill。
📜 元の英語説明(参考)
Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.
🇯🇵 日本人クリエイター向け解説
Vue Router 4におけるパターン、ナビゲーションガード、ルートパラメータ、ルートとコンポーネントのライフサイクル間の相互作用を解説するSkill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
下記のコマンドをコピーしてターミナル(Mac/Linux)または PowerShell(Windows)に貼り付けてください。 ダウンロード → 解凍 → 配置まで全自動。
mkdir -p ~/.claude/skills && cd ~/.claude/skills && curl -L -o vue-router-best-practices.zip https://jpskill.com/download/5556.zip && unzip -o vue-router-best-practices.zip && rm vue-router-best-practices.zip$d = "$env:USERPROFILE\.claude\skills"; ni -Force -ItemType Directory $d | Out-Null; iwr https://jpskill.com/download/5556.zip -OutFile "$d\vue-router-best-practices.zip"; Expand-Archive "$d\vue-router-best-practices.zip" -DestinationPath $d -Force; ri "$d\vue-router-best-practices.zip"完了後、Claude Code を再起動 → 普通に「動画プロンプト作って」のように話しかけるだけで自動発動します。
💾 手動でダウンロードしたい(コマンドが難しい人向け)
- 1. 下の青いボタンを押して
vue-router-best-practices.zipをダウンロード - 2. ZIPファイルをダブルクリックで解凍 →
vue-router-best-practicesフォルダができる - 3. そのフォルダを
C:\Users\あなたの名前\.claude\skills\(Win)または~/.claude/skills/(Mac)へ移動 - 4. Claude Code を再起動
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-17
- 取得日時
- 2026-05-18
- 同梱ファイル
- 1
📖 Skill本文(日本語訳)
※ 原文(英語/中国語)を Gemini で日本語化したものです。Claude 自身は原文を読みます。誤訳がある場合は原文をご確認ください。
[Skill 名] vue-router-best-practices Vue Router のベストプラクティス、よくある落とし穴、およびナビゲーションパターンです。
ナビゲーションガード
- 異なるパラメーターを持つ同じルート間のナビゲーション → router-beforeenter-no-param-trigger を参照してください
- beforeRouteEnter ガードでのコンポーネントインスタンスへのアクセス → router-beforerouteenter-no-this を参照してください
- await なしで API 呼び出しを行うナビゲーションガード → 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 を参照してください
📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開
Vue Router best practices, common gotchas, and navigation patterns.
Navigation Guards
- Navigating between same route with different params → See router-beforeenter-no-param-trigger
- Accessing component instance in beforeRouteEnter guard → See router-beforerouteenter-no-this
- Navigation guard making API calls without awaiting → See router-guard-async-await-pattern
- Users trapped in infinite redirect loops → See router-navigation-guard-infinite-loop
- Navigation guard using deprecated next() function → See router-navigation-guard-next-deprecated
Route Lifecycle
- Stale data when navigating between same route → See router-param-change-no-lifecycle
- Event listeners persisting after component unmounts → See router-simple-routing-cleanup
Setup
- Building production single-page application → See router-use-vue-router-for-production