使用法

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プロパティの詳細については、ドキュメントを参照してください。

export default defineNuxtRouteMiddleware(async (to, from) => {
  const user = await useCurrentUser()
  if (!user && to.path !== '/login') {
    // ここで必ずreturnすることが重要
    return navigateTo('/login', { redirectCode: 302 })
  }
})

async function goToSearch() {
  await navigateTo({
    path: '/search',
    query: { q: 'nuxt', page: '1' }
  })
}

await navigateTo('https://nuxt.com', {
  external: true,
  open: {
    target: '_blank',
    windowFeatures: {
      width: 800,
      height: 600,
      noopener: true,
      noreferrer: true
    }
  }
})