navigateTo

使用方法

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

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 })
  }
})

ルートミドルウェア内で navigateTo を使用する場合、ミドルウェアの実行フローが正しく機能するように、その結果を返さなければなりません。

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

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.path !== '/search') {
    // ❌ This will not work as expected
    navigateTo('/search', { redirectCode: 301 })
    return
  }
})

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

外部 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>

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

<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>

タイプ

export 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 }>

パラメーター

@BobbieGoede

タイプ: 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
  • window のopen()メソッドを使用して URL へナビゲートすることを許可します。このオプションはクライアントサイドでのみ適用され、サーバーサイドでは無視されます。
    以下のプロパティを受け入れるオブジェクト
  • target
    • 型: string
    • デフォルト: '_blank'
    • 空白を含まない文字列で、リソースが読み込まれるブラウジングコンテキストの名前を指定します。
  • windowFeatures
    • 型: OpenWindowFeatures
    • 以下のプロパティを受け入れるオブジェクト

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

      
      windowFeatures プロパティに関するより詳細な情報は、ドキュメントを参照してください。