Zenn
🛣

navigateToとuseRouterの比較

2024/01/15に公開
Nuxt
Vue.js
#
tech
tech

使用シーン

useRouter

Vue Router の完全な機能へのアクセスが必要な場合、または複雑なルーティングロジックを扱う場合に適しています。

シンプルで直感的なページ遷移が求められる場合に適しており、特に Nuxt.js 3 での簡単なページ遷移のために設計されています。

useRouter 概要

  • useRouter は、Vue Router インスタンスへのアクセスを提供します。これを使用して、Vue Router の全機能（ページ遷移、クエリパラメータの取得、ナビゲーションガードのセットアップなど）にアクセスできます。
  • ページ遷移を行うためには、router.push、router.replace、router.go などのメソッドを使用します。
<script lang="ts" setup>
const goToAboutPage = () => {
  router.push("/about");
};
const replaceWithHomePage = () => {
  router.replace("/");
};
const goBack = () => {
  router.go(-1);
};
</script>

navigateTo 概要

  • navigateTo は、Nuxt.js 3 で導入された関数で、ページ遷移をより簡単にするためのユーティリティです。
  • navigateTo は、主にページ遷移を行うために使用され、router.push のラッパーとして機能します。navigateTo はシンプルなシナリオでの使用を意図しており、ルーターの詳細な設定や管理は提供しません。
  • navigateTo を使用すると、簡潔な構文で直接ページ遷移を実行できます。
<script lang="ts" setup>
import { navigateTo } from "nuxt/app";
const goToAboutPage = () => {
  navigateTo("/about");
};
</script>

useRouter にできて navigateTo にできないこと

  • ナビゲーションガードの設定
    useRouter を使用すると、グローバルやルート固有のナビゲーションガード（例：beforeEach、beforeEnter）を設定できます。これらのガードは、ルーティングの挙動を条件に応じて制御するのに重要です。
  • クエリやパラメータの取得
    現在のルートに関連するクエリパラメータやパラメータを取得する際には useRouter が必要です。navigateTo では、これらの情報の取得は直接的には行えません。
  • 履歴の操作
    router.go() や router.back() のようなブラウザ履歴の操作は useRouter を介してのみ可能です。navigateTo はページ遷移に限定されており、履歴の操作はできません。
  • 詳細なルート情報の取得
    現在のルートや遷移先のルートの詳細情報（メタデータ、パス、名前など）にアクセスする場合、useRouter が必要です。
  • 動的ルートマッチング
    より複雑な動的ルートマッチングや、パターンに基づくルーティングの設定は useRouter でのみ実現可能です。

navigateTo の優れている点

下記の discussions でも言及されています。
navigateTo を使うとより簡単に遷移することができます。
https://github.com/nuxt/nuxt/discussions/22581

以下概略

  • 機能: navigateTo は nuxt 3 コンポーザブル上にあり、コア チームによって保守され、内部ルート + 外部 URL ナビゲーションなどのナビゲーションを処理します。
  • 使いやすさ: navigateTo を使用すると、ナビゲーション関連の間違いをする可能性が低くなります。
    外部 URL に正しく移動することができます。
  • コードの簡略化: navigateTo を使用すると、router.push / router.replace 操作がカプセル化され、コードベースが読みやすく保守しやすくなります。
<script lang="ts" setup>
const router = useRouter();
// こっちは遷移できない
const routerPush = () => {
  router.push("https:外部リンク");
};
// こっちは遷移できる
const navigate = () => {
  navigateTo("https:外部リンク", {
    external: true,
  });
};
</script>

Discussion