1.9 KiB
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.