🛠️ 開発・MCP コミュニティ

vue-router-best-practices

Vue Router 4のパターン、ナビゲーションガード、ルートパラメータ、およびルートとコンポーネントのライフサイクル連携に関するベストプラクティスを学ぶSkill。

📜 元の英語説明(参考)

Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.

🇯🇵 日本人クリエイター向け解説

一言でいうと

※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。

⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。

下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。

1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
3. 展開してできたフォルダを、ホームフォルダの .claude/skills/ に置く
- · macOS / Linux: ~/.claude/skills/
- · Windows: %USERPROFILE%\.claude\skills\

Claude Code を再起動すれば完了。「この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 を参照してください

📜 原文 SKILL.md(Claudeが読む英語/中国語)を展開

Vue Router best practices, common gotchas, and navigation patterns.

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

Stale data when navigating between same route → See router-param-change-no-lifecycle
Event listeners persisting after component unmounts → See router-simple-routing-cleanup

Building production single-page application → See router-use-vue-router-for-production