はじめに
新卒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はルートのナビゲーション（ページ遷移など）を制御するために使う。
今回はそれぞれの違いについて、軽くですがまとめてみました。普段案件で使っているけど深く理解できていないことを、再度深掘りすることはすごく大切だなと感じました！