navigateTo

navigateTo is a router helper function that allows creating programmatic navigation for users to navigate within Nuxt application.

navigateTo is available on both server side and client side. It can be used within plugins, middleware or can be called directly to perform page navigation.

Usage

navigateTo (route: string | Route, { redirectCode = 302, replace = false })

route can be a plain string or a route object to redirect to.

Examples

Within a Vue Component

<script setup>// stringreturn navigateTo('/search')// route objectreturn navigateTo({ path: '/search' })// route object with query parametersreturn navigateTo({    path: '/search',    query: {        name: name.value,        type: type.value    }})</script>

Within Route Middleware

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

<script setup>    await navigateTo('/', { replace: true })</script>

Options

redirectCode

• Type: Number

navigateTo redirects to the given path and sets the redirect code to 302 Found by default when the redirect takes place on the server side.

This default behavior can be modified by providing different redirectCode as an optional parameter. Commonly 301 Moved Permanently can be used for permant redirections.

replace

• Type: Boolean

By default, navigateTo pushes the given route into Vue router instance on client-side.

This behavior can be changed by setting replace to true, to indicate that given route should be replaced.