Skip to content
This repository was archived by the owner on Apr 6, 2023. It is now read-only.
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 64 additions & 3 deletions docs/content/3.api/3.utils/navigate-to.md
Original file line number Diff line number Diff line change
@@ -1,7 +1,68 @@
# `navigateTo`

::ReadMore{link="/guide/features/routing"}
::
`navigateTo` is a route 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.

> While using `navigateTo`, make sure to use `await` or chain its result by returning from functions.

## Required parameter

`navigateTo` takes route as a required parameter that can be a plain string or a route object.

- **route:** type: string | Route

### Example: Vue component

```js
<script setup>
function navigate(){
Comment thread
atinux marked this conversation as resolved.
Outdated
// 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>
```

## Optional parameters

::NeedContribution
- **redirectCode:** type: number

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

This default behaviour can be modified by providing different `redirectCode` as an optional parameter.
Comment thread
atinux marked this conversation as resolved.
Outdated

### Example: Route middleware

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

- **replace:** type: boolean

By default, `navigateTo` pushes the given route into Vue router instance on.
Comment thread
atinux marked this conversation as resolved.
Outdated

This behaviour can be changed by setting `replace` to `true`, to indicate that given route should be replaced.
Comment thread
atinux marked this conversation as resolved.
Outdated

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

::ReadMore{link="/guide/features/routing"}
::