vue-router-best-practices

Name: vue-router-best-practices
Author: vuejs-ai

github.com/vuejs-ai開発3.2k15.3k 回インストール5 日前に更新

リポジトリ

vue-router-best-practices について

Vue アプリケーション開発者向けの Vue Router 実践スキルです。ナビゲーションガード、ルートのライフサイクル、本番環境の設定を扱い、よくある問題を案内します。

主な機能

01ナビゲーションガードのパターン
02ルートパラメーターとライフサイクルの指針
03残存イベントリスナーのクリーンアップ
04本番 SPA のルーティング設定

活用シーン

01リダイレクトやガードの問題の調査
02ルートパラメーター間の遷移への対応
03コンポーネント破棄後のリスナー削除
04SPA への Vue Router 設定

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/vuejs-ai/skills --skill vue-router-best-practices

インストール後、Claude Code で/vue-router-best-practicesを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

reference/

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

詳細

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 対応

ログインしてコメント

基本情報

作者: vuejs-ai
リポジトリ: vuejs-ai/skills
カテゴリ: 開発
インストール数: 15,300
GitHub スター: 3,199

問題を報告

おすすめの Skills

すべての Skills

remotion-render

github.com/inference-sh

1.6M

inference.sh を介して React/Remotion コンポーネントコードから動画をレンダリングします。TSX コードを渡すと MP4 を取得できます。useCurrentFrame、useVideoConfig、spring、interpolate、AbsoluteFill、Sequence など、すべての Remotion API に対応します。解像度、FPS、長さ、コーデックを設定できます。用途：プログラムによる動画生成、アニメーショングラフィック、モーションデザイン、データ駆動型動画、React アニメーションの動画化。トリガー：remotion、render video from code、tsx to video、react video、programmatic video、remotion render、code to video、animated video、motion graphics code、react animation video

improve-codebase-architecture

github.com/mattpocock

1.2M

コードベースをスキャンして改善の機会を探し、ビジュアル HTML レポートとして提示し、選択したものを詳しく掘り下げる。

design-mobile-apps

github.com/designed-by-ai

1.1M

Sleek でモバイルアプリの画面をデザインし、Sleek プロジェクトを編集して、React Native または HTML でデザインを実装します。

vercel-react-best-practices

github.com/vercel-labs

848.6k

Vercel Engineering の React および Next.js パフォーマンス最適化ガイドライン。React / Next.js コードを記述、レビュー、またはリファクタリングするときに、最適なパフォーマンスパターンを確保するため、このスキルを使用する必要があります。React コンポーネント、Next.js ページ、データ取得、バンドル最適化、またはパフォーマンス改善を含むタスクで発火します。