navigateTo · Nuxt ユーティリティ

navigateTo は、クライアント側とサーバー側の両方で使用できます（ただし、Nitro ルート内では使用できません）。

使用法

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

サーバーエンドポイントからリダイレクトを送信するには、代わりに sendRedirect を使用してください。

Vue コンポーネント内

<script setup lang="ts">
// passing 'to' as a string
await navigateTo('/search')

// ... or as a route object
await navigateTo({ path: '/search' })

// ... or as a route object with query parameters
await navigateTo({
  path: '/search',
  query: {
    page: 1,
    sort: 'asc'
  }
})
</script>

ルートミドルウェア内

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.path !== '/search') {
    // setting the redirect code to '301 Moved Permanently'
    return navigateTo('/search', { redirectCode: 301 })
  }
})

詳細については、ドキュメント > ガイド > ディレクトリ構造 > ミドルウェアを参照してください。

外部 URL

navigateTo の external パラメータは、URL へのナビゲーションの処理方法に影響します。

external: true なし:
- 内部 URL は期待どおりにナビゲートされます。
- 外部 URL はエラーをスローします。
external: true あり:
- 内部 URL はページ全体のリロードでナビゲートされます。
- 外部 URL は期待どおりにナビゲートされます。

例

<script setup lang="ts">
// will throw an error;
// navigating to an external URL is not allowed by default
await navigateTo('https://nuxt.dokyumento.jp')

// will redirect successfully with the 'external' parameter set to 'true'
await navigateTo('https://nuxt.dokyumento.jp', {
  external: true
})
</script>

open() の使用

<script setup lang="ts">
// will open 'https://nuxt.dokyumento.jp' in a new tab
await navigateTo('https://nuxt.dokyumento.jp', {
  open: {
    target: '_blank',
    windowFeatures: {
      width: 500,
      height: 500
    }
  }
})
</script>

型

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

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

呼び出す場合は、navigateTo の結果に対して常に await または return を使用するようにしてください。

パラメータ

`to`

型: RouteLocationRaw | undefined | null

デフォルト: '/'

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

例

// Passing the URL directly will redirect to the '/blog' page
await navigateTo('/blog')

// Using the route object, will redirect to the route with the name 'blog'
await navigateTo({ name: 'blog' })

// Redirects to the 'product' route while passing a parameter (id = 1) using the route object.
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
ウィンドウの open() メソッドを使用して URL に移動できるようにします。このオプションはクライアント側でのみ適用され、サーバー側では無視されます。
次のプロパティを受け入れるオブジェクト
- target
  型: string
  デフォルト: '_blank'
  リソースがロードされるブラウジングコンテキストの名前を指定する、空白を含まない文字列。
- windowFeatures (オプション)
  型: OpenWindowFeatures
  次のプロパティを受け入れるオブジェクト
  - popup (オプション)
    型: boolean
  - width または innerWidth (オプション)
    型: number
  - height または innerHeight (オプション)
    型: number
  - left または screenX (オプション)
    型: number
  - top または screenY (オプション)
    型: number
  - noopener (オプション)
    型: boolean
  - noreferrer (オプション)
    型: boolean
  windowFeatures プロパティの詳細については、ドキュメントを参照してください。

defineRouteRules

ページレベルでのハイブリッドレンダリングのためのルート規則を定義します。

onBeforeRouteLeave

onBeforeRouteLeave コンポーザブルを使用すると、コンポーネント内でルートガードを登録できます。