Skip to content
This repository was archived by the owner on Apr 6, 2023. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
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
2 changes: 1 addition & 1 deletion docs/content/2.guide/3.directory-structure/8.middleware.md
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export default defineNuxtRouteMiddleware((to, from) => {

Nuxt provides two globally available helpers that can be returned directly from the middleware:

1. `navigateTo (route: string | Route, options: { redirectCode: number, replace: boolean )` - Redirects to the given route, within plugins or middleware. It can also be called directly to perform page navigation.
1. `navigateTo (to: RouteLocationRaw | undefined | null, options: { replace: boolean, redirectCode: number, external: boolean )` - Redirects to the given route, within plugins or middleware. It can also be called directly to perform page navigation.
2. `abortNavigation (err?: string | Error)` - Aborts the navigation, with an optional error message.

Unlike navigation guards in [the vue-router docs](https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards), a third `next()` argument is not passed, and redirects or route cancellation is handled by returning a value from the middleware. Possible return values are:
Expand Down
4 changes: 2 additions & 2 deletions docs/content/3.api/1.composables/use-router.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ If you have a `pages/` folder, `useRouter` is identical in behavior to the one p
- **back:** Go back in history if possible, same as `router.go(-1)`.
- **forward:** Go forward in history if possible, same as `router.go(1)`.
- **go:** Move forward or backward through the history without the hierarchical restrictions enforced in `router.back()` and `router.forward()`.
- **push:** Programmatically navigate to a new URL by pushing an entry in the history stack. **It is recommended to use [`navigateTo`](http://v3.nuxtjs.org/api/utils/navigate-to#navigateto) instead.**
- **replace:** Programmatically navigate to a new URL by replacing the current entry in the routes history stack. **It is recommended to use [`navigateTo`](http://v3.nuxtjs.org/api/utils/navigate-to#navigateto) instead.**
- **push:** Programmatically navigate to a new URL by pushing an entry in the history stack. **It is recommended to use [`navigateTo`](http://v3.nuxtjs.org/api/utils/navigate-to) instead.**
- **replace:** Programmatically navigate to a new URL by replacing the current entry in the routes history stack. **It is recommended to use [`navigateTo`](http://v3.nuxtjs.org/api/utils/navigate-to) instead.**

> TIP: `router.addRoute()` adds route details into an array of routes and it is useful while building Nuxt plugins while `router.push()` on the other hand, triggers a new navigation immediately and it is useful in Nuxt Page components, Vue components and composable.

Expand Down
119 changes: 79 additions & 40 deletions docs/content/3.api/3.utils/navigate-to.md
Original file line number Diff line number Diff line change
@@ -1,76 +1,115 @@
# `navigateTo`

`navigateTo` is a router helper function that allows creating programmatic navigation for users to navigate within Nuxt application.
`navigateTo` is a router helper function that allows programmatically navigating users through your 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
## Type

```ts
navigateTo (route: string | Route, { redirectCode = 302, replace = false })
```
navigateTo(to: RouteLocationRaw | undefined | null, options?: NavigateToOptions) => Promise<void | NavigationFailure> | RouteLocationRaw

`route` can be a plain string or a route object to redirect to.
interface NavigateToOptions {
replace?: boolean
redirectCode?: number
external?: boolean
}
```

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

## Parameters

### `to`

**Type**: [`RouteLocationRaw`](https://router.vuejs.org/api/#routelocationraw) | `undefined` | `null`

**Default**: `'/'`

`to` can be a plain string or a route object to redirect to. When passed as `undefined` or `null`, it will default to `'/'`.

### `options` (optional)

**Type**: `NavigateToOptions`

An object accepting the following properties:

- `replace` (optional)

**Type**: `boolean`

**Default**: `false`

By default, `navigateTo` pushes the given route into the Vue Router's instance on the client side.

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

- `redirectCode` (optional)

**Type**: `number`

**Default**: `302`

`navigateTo` redirects to the given path and sets the redirect code to [`302 Found`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/302) by default when the redirection takes place on the server side.

This default behavior can be modified by providing different `redirectCode`. Commonly, [`301 Moved Permanently`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/301) can be used for permanent redirections.

- `external` (optional)

**Type**: `boolean`

**Default**: `false`

Allows navigating to an external URL when set to `true`. Otherwise, `navigateTo` will throw an error, as external navigation is not allowed by default.

## Examples

### Within a Vue Component
### Navigating Within a Vue Component

```vue
<script setup>
// string
// passing 'to' as a string
return navigateTo('/search')

// route object
// ... or as a route object
return navigateTo({ path: '/search' })

// route object with query parameters
// ... or as a route object with query parameters
return navigateTo({
path: '/search',
query: {
name: name.value,
type: type.value
}
path: '/search',
query: {
page: 1,
sort: 'asc'
}
})
</script>
```

### Within Route Middleware
### Navigating Within Route Middleware

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

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

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

### Options

#### `redirectCode`
### Navigating to an External URL

- Type: Number

`navigateTo` redirects to the given path and sets the redirect code to [`302` Found](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/302) 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](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/301) 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.
```vue
<script setup>
// will throw an error;
// navigating to an external URL is not allowed by default
await navigateTo('https://v3.nuxtjs.org')

// will redirect successfully with the 'external' parameter set to 'true'
await navigateTo('https://v3.nuxtjs.org', {
external: true
})
</script>
```