使用法

navigateToはサーバーサイドとクライアントサイドの両方で利用可能です。Nuxtコンテキスト内、または直接使用してページナビゲーションを実行できます。

Vueコンポーネント内で

// 'to'を文字列として渡す
await navigateTo('/search')

// ... またはルートオブジェクトとして
await navigateTo({ path: '/search' })

// ... またはクエリパラメータを含むルートオブジェクトとして
await navigateTo({
  path: '/search',
  query: {
    page: 1,
    sort: 'asc'
  }
})

ルートミドルウェア内で

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.path !== '/search') {
    // リダイレクトコードを'301 Moved Permanently'に設定
    return navigateTo('/search', { redirectCode: 301 })
  }
})

ルートミドルウェア内でnavigateToを使用する場合、ミドルウェアの実行フローが正しく動作するように、その結果を返す必要があります。

例えば、次の実装は期待通りに動作しません：

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.path !== '/search') {
    // ❌ これは期待通りに動作しません
    navigateTo('/search', { redirectCode: 301 })
    return
  }
})

この場合、navigateToは実行されますが返されないため、予期しない動作を引き起こす可能性があります。

外部URLへのナビゲーション

navigateToのexternalパラメータは、URLへのナビゲーションの方法に影響を与えます：

• external: trueがない場合：

  • 内部URLは期待通りにナビゲートします。
  • 外部URLはエラーをスローします。

• external: trueがある場合：

  • 内部URLはフルページリロードでナビゲートします。
  • 外部URLは期待通りにナビゲートします。

例

// エラーをスローします；
// デフォルトでは外部URLへのナビゲーションは許可されていません
await navigateTo('https://nuxt.com')

// 'external'パラメータを'true'に設定すると正常にリダイレクトします
await navigateTo('https://nuxt.com', {
  external: true
})

新しいタブでページを開く

// 'https://nuxt.com'を新しいタブで開きます
await navigateTo('https://nuxt.com', {
  open: {
    target: '_blank',
    windowFeatures: {
      width: 500,
      height: 500
    }
  }
})

型

function navigateTo(
  to: RouteLocationRaw | undefined | null,
  options?: NavigateToOptions
) => Promise<void | NavigationFailure | false> | false | void | RouteLocationRaw 

interface NavigateToOptions {
  replace?: boolean
  redirectCode?: number
  external?: boolean
  open?: OpenOptions
}

type OpenOptions = {
  target: string
  windowFeatures?: OpenWindowFeatures
}

type OpenWindowFeatures = {
  popup?: boolean
  noopener?: boolean
  noreferrer?: boolean
} & XOR<{ width?: number }, { innerWidth?: number }>
  & XOR<{ height?: number }, { innerHeight?: number }>
  & XOR<{ left?: number }, { screenX?: number }>
  & XOR<{ top?: number }, { screenY?: number }>

パラメータ

to

型: RouteLocationRaw | undefined | null

デフォルト: '/'

toはリダイレクト先のプレーンな文字列またはルートオブジェクトです。undefinedまたはnullとして渡された場合、デフォルトで'/'になります。

例

// URLを直接渡すと'/blog'ページにリダイレクトします
await navigateTo('/blog')

// ルートオブジェクトを使用すると、名前が'blog'のルートにリダイレクトします
await navigateTo({ name: 'blog' })

// ルートオブジェクトを使用してパラメータ（id = 1）を渡しながら'product'ルートにリダイレクトします。
await navigateTo({ name: 'product', params: { id: 1 } })

options (オプション)

型: NavigateToOptions

以下のプロパティを受け入れるオブジェクト：

• replace

  • 型: boolean

  • デフォルト: false

  • デフォルトでは、navigateToはクライアントサイドのVue Routerインスタンスに与えられたルートをプッシュします。

    この動作は、replaceをtrueに設定することで変更でき、与えられたルートが置き換えられることを示します。

• redirectCode

  • 型: number

  • デフォルト: 302

  • navigateToは与えられたパスにリダイレクトし、サーバーサイドでリダイレクトが行われる場合、デフォルトでリダイレクトコードを302 Foundに設定します。

    このデフォルトの動作は、異なるredirectCodeを提供することで変更できます。一般的に、301 Moved Permanentlyが恒久的なリダイレクトに使用されます。

• external

  • 型: boolean

  • デフォルト: false

  • trueに設定すると、外部URLへのナビゲーションを許可します。それ以外の場合、navigateToはエラーをスローします。デフォルトでは外部ナビゲーションは許可されていません。

• open

  • 型: OpenOptions

  • URLをウィンドウのopen()メソッドを使用してナビゲートすることを許可します。このオプションはクライアントサイドでのみ適用され、サーバーサイドでは無視されます。

    以下のプロパティを受け入れるオブジェクト：

  • target

    • 型: string

    • デフォルト: '_blank'

    • リソースが読み込まれるブラウジングコンテキストの名前を指定する、空白のない文字列。

  • windowFeatures

    • 型: OpenWindowFeatures

    • 以下のプロパティを受け入れるオブジェクト：

      プロパティ	型	説明
      popup	boolean	ブラウザが決定するUI機能を持つ最小限のポップアップウィンドウを要求します。
      width または innerWidth	number	スクロールバーを含むコンテンツ領域の幅（最小100ピクセル）を指定します。
      height または innerHeight	number	スクロールバーを含むコンテンツ領域の高さ（最小100ピクセル）を指定します。
      left または screenX	number	画面の左端に対する新しいウィンドウの水平位置を設定します。
      top または screenY	number	画面の上端に対する新しいウィンドウの垂直位置を設定します。
      noopener	boolean	新しいウィンドウがwindow.openerを介して元のウィンドウにアクセスするのを防ぎます。
      noreferrer	boolean	Refererヘッダーの送信を防ぎ、暗黙的にnoopenerを有効にします。

      windowFeaturesプロパティの詳細については、ドキュメントを参照してください。