vue-router-best-practices
Vue Router のナビゲーションガードを改善する
Vue Router の問題は、古いデータ、壊れたリダイレクト、脆弱なルートチェックを引き起こす可能性があります。このスキルは、ガード、params、クリーンアップ、本番環境のルーティングに関する焦点を絞ったパターンを提供します。
自分のエージェントでインストール
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "vue-router-best-practices" from https://skillstore.io/skills/vuejs-ai-vue-router-best-practices.md and its manifest at https://skillstore.io/api/skills/vuejs-ai-vue-router-best-practices/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
エージェントが読めるリソース
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
テストする
「vue-router-best-practices」を使用しています。 ユーザー詳細ページで、あるユーザールートから別のユーザールートに移動した後も前のユーザーが表示される。
期待される結果:
回答では、コンポーネントの再利用が原因であると特定します。新しいデータを取得するために、ルート id を監視するか onBeforeRouteUpdate を使用することを推奨します。
「vue-router-best-practices」を使用しています。 auth guard が、認証されていないすべてのナビゲーションをログインルートにリダイレクトする。
期待される結果:
回答では、リダイレクトループのリスクを説明します。ログインリダイレクトを返す前に、公開ルートを除外するか route meta を使用することを推奨します。
「vue-router-best-practices」を使用しています。 チームが、本番環境の Vue アプリで単純なハッシュルーターを置き換えたいと考えている。
期待される結果:
回答では、単純なルーティングと Vue Router の機能を比較します。遅延読み込み、route meta、history mode、ナビゲーションガードを強調します。
セキュリティ監査
安全All 15 static findings were false positives after context review. The dynamic imports are static Vue Router lazy-loading examples, the backticks are JavaScript log template literals, and the route checks are tutorial code. No evidence found of prompt injection, data exfiltration, filesystem access, command execution, or malicious intent.
リスク要因
⚡ スクリプトを含む (6)
このレポートを共有・引用
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
レポートリンクをコピー
https://skillstore.io/skills/vuejs-ai-vue-router-best-practices/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdownバッジ
[](https://skillstore.io/skills/vuejs-ai-vue-router-best-practices?utm_source=security_passport_badge)HTMLバッジ
<a href="https://skillstore.io/skills/vuejs-ai-vue-router-best-practices?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/vuejs-ai-vue-router-best-practices/security.svg" alt="Skillstore security assessment" loading="lazy"></a>埋め込みカード
<iframe src="https://skillstore.io/embed/skills/vuejs-ai-vue-router-best-practices.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>学術引用 (APA · BibTeX · CFF)
APA形式の引用
github.com/vuejs-ai. (2026). vue-router-best-practices security audit report (audit version 5) [Author version 1.0.0]. Skillstore. https://skillstore.io/skills/vuejs-ai-vue-router-best-practices/audits/5BibTeX形式の引用
@techreport{github-com-vuejs-ai-vuejs-ai-vue-router-best-practices-2026,
author = {github.com/vuejs-ai},
title = {vue-router-best-practices security audit report (audit version 5)},
institution = {Skillstore},
year = {2026},
number = {5},
url = {https://skillstore.io/skills/vuejs-ai-vue-router-best-practices/audits/5},
note = {Author version 1.0.0}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "vue-router-best-practices security audit report (audit version 5)"
version: "1.0.0"
type: report
authors:
- name: "github.com/vuejs-ai"
date-released: "2026-07-07"
url: "https://skillstore.io/skills/vuejs-ai-vue-router-best-practices/audits/5"
identifiers:
- type: other
value: "skillstore:vuejs-ai-vue-router-best-practices:audit:5"
description: "Skillstore immutable audit report identifier"
バリアントを比較
インストール可能なバリアント 2 件各作者のスキルは個別のインストール項目として維持されます。推奨バリアントは Skillstore の証拠で順位付けされます。
このバリアントが首位の理由
antfu-vue-router-best-practices
2026-10-24
vuejs-ai-vue-router-best-practices
2026-09-09
Skillstore スコア
このスコアの理由 証拠の信頼度: 高作成できるもの
ガードのバグを修正する
Vue Router のナビゲーションガードにおけるリダイレクト、await の不足、非推奨の next 呼び出しを診断します。
ルート駆動のデータをレビューする
ルートパラメータの変更時に、watcher またはコンポーネント内の更新ガードを通じてデータが再読み込みされるかを確認します。
本番環境のルーティングを計画する
遅延読み込み、route meta、history mode、クリーンアップ責任に関する Vue Router のパターンを選択します。
これらのプロンプトを試す
vue-router-best-practices skill を使用して、私の Vue Router ナビゲーションが正しく動作しない理由を説明してください。ガード、params、ライフサイクルのタイミングに焦点を当ててください。
vue-router-best-practices skill を使用して、私の auth guard をレビューしてください。非推奨の next 使用を、return ベースの Vue Router 4 パターンに置き換えてください。
vue-router-best-practices skill を使用して、再利用されるコンポーネントで route params が変更されたときにデータを読み込む安全なパターンを設計してください。
vue-router-best-practices skill を使用して、私の SPA ルーティングアーキテクチャを、リダイレクトループ、非同期ガードの失敗、クリーンアップの不足、本番環境への対応状況の観点から監査してください。
ベストプラクティス
- リダイレクト、キャンセル、通常のナビゲーションには、return ベースの Vue Router 4 ガードを使用します。
- 同一ルート内のパラメータ変更は、watcher または onBeforeRouteUpdate で処理します。
- 本番環境の SPA では、手作りのハッシュルーティングではなく Vue Router を使用します。
回避
- 同一ルート内のパラメータ変更を検証するために beforeEnter に依存すること。
- next を複数回呼び出すこと、またはレガシーガードで next の呼び出しを忘れること。
- コンポーネントのクリーンアップ時に削除せずに hashchange リスナーを追加すること。
よくある質問
このスキルはどの Vue Router バージョンを対象にしていますか？
私のアプリ用のルーティングコードを書けますか？
route params だけが変更されたときに beforeEnter は実行されますか？
ナビゲーションガードで今でも next を使うべきですか？
このスキルはリダイレクトループの防止を扱っていますか？
このスキルは公開しても安全ですか？
開発者情報
ライセンス
MIT
作者バージョン
v1.0.0
Skillstore リビジョン
r1
参照
36e07d5e13068e5be64447e8f20b427cf2cbd21a
メンテナンスの新しさ
2026/7/24
利用状況
13 ダウンロード · 152 閲覧
ファイル構成
📄 router-beforeenter-no-param-trigger.md
📄 router-beforerouteenter-no-this.md
📄 router-guard-async-await-pattern.md
📄 router-navigation-guard-infinite-loop.md
📄 router-navigation-guard-next-deprecated.md
📄 router-param-change-no-lifecycle.md
📄 router-simple-routing-cleanup.md
📄 router-use-vue-router-for-production.md
📄 SKILL.md