1.9 KiB

Raw Blame History

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

::alert{type="warning"} Make sure to use always await or return on result of navigateTo() when calling it. ::

Examples

Within a Vue component

<script setup>
// string
return navigateTo('/search')

// route object
return navigateTo({ path: '/search' })

// route object with query parameters
return 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>

::ReadMore{link="/guide/directory-structure/middleware"} ::

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.

1.9 KiB Raw Blame History

navigateTo