useRouteとuseRouterの違いは？

はじめに

新卒1年目のポテトです。🍟
仕事をしていく中で学んだことをアウトプットしたいと思い、Qiitaを始めるになりました！
今回は案件で使用しているVue Routerの、useRouter と useRouteの違いについてまとめていきます。

useRouteとuseRouterの定義元

Vue Routerの useRouter と useRoute は、Vue 3のComposition APIを使ってルーティング関連の機能にアクセスするための関数です。

/**
 * Returns the current route location. Equivalent to using `$route` inside
 * templates.
 */
export declare function useRoute(): RouteLocationNormalizedLoaded;


/**
 * Returns the router instance. Equivalent to using `$router` inside
 * templates.
 */
export declare function useRouter(): Router;

useRoute

• 現在のアクティブなルートに関する情報を取得するために使う。
• useRouteは 現在のルートのRouteオブジェクトを返す。(path、query、paramsなど、現在のURLの情報が含まれる。)
• URLパラメーターやクエリパラメーターを取得する際に使用。

const route = useRoute();
const userId = route.params.id; // URLからidパラメーターを取得

useRouter

• プログラムによるルーティング（ページ遷移など）を行うために使う。
• useRouterはRouterインスタンスを返す。
• 新しいページに遷移する、履歴を操作するなどに使用。

const router = useRouter();
router.push('/home'); // ホームページに遷移

まとめ

• useRouteは現在のルート（URL）の情報を取得するために使う。
• useRouterはルートのナビゲーション（ページ遷移など）を制御するために使う。

---

今回はそれぞれの違いについて、軽くですがまとめてみました。普段案件で使っているけど深く理解できていないことを、再度深掘りすることはすごく大切だなと感じました！