mirror of
https://github.com/nuxt/nuxt.git
synced 2025-01-22 19:32:40 +00:00
89 lines
2.8 KiB
Markdown
89 lines
2.8 KiB
Markdown
---
|
|
title: 'addRouteMiddleware'
|
|
description: 'addRouteMiddleware() is a helper function to dynamically add middleware in your application.'
|
|
links:
|
|
- label: Source
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/nuxt/nuxt/blob/main/packages/nuxt/src/app/composables/router.ts
|
|
size: xs
|
|
---
|
|
|
|
::note
|
|
Route middleware are navigation guards stored in the [`middleware/`](/docs/guide/directory-structure/middleware) directory of your Nuxt application (unless [set otherwise](/docs/api/nuxt-config#middleware)).
|
|
::
|
|
|
|
## Type
|
|
|
|
```ts
|
|
function addRouteMiddleware (name: string, middleware: RouteMiddleware, options?: AddRouteMiddlewareOptions): void
|
|
function addRouteMiddleware (middleware: RouteMiddleware): void
|
|
|
|
interface AddRouteMiddlewareOptions {
|
|
global?: boolean
|
|
}
|
|
```
|
|
|
|
## Parameters
|
|
|
|
### `name`
|
|
|
|
- **Type:** `string` | `RouteMiddleware`
|
|
|
|
Can be either a string or a function of type `RouteMiddleware`. Function takes the next route `to` as the first argument and the current route `from` as the second argument, both of which are Vue route objects.
|
|
|
|
Learn more about available properties of [route objects](/docs/api/composables/use-route).
|
|
|
|
### `middleware`
|
|
|
|
- **Type:** `RouteMiddleware`
|
|
|
|
The second argument is a function of type `RouteMiddleware`. Same as above, it provides `to` and `from` route objects. It becomes optional if the first argument in `addRouteMiddleware()` is already passed as a function.
|
|
|
|
### `options`
|
|
|
|
- **Type:** `AddRouteMiddlewareOptions`
|
|
|
|
An optional `options` argument lets you set the value of `global` to `true` to indicate whether the router middleware is global or not (set to `false` by default).
|
|
|
|
## Examples
|
|
|
|
### Named Route Middleware
|
|
|
|
Named route middleware is defined by providing a string as the first argument and a function as the second:
|
|
|
|
```ts [plugins/my-plugin.ts]
|
|
export default defineNuxtPlugin(() => {
|
|
addRouteMiddleware('named-middleware', () => {
|
|
console.log('named middleware added in Nuxt plugin')
|
|
})
|
|
})
|
|
```
|
|
|
|
When defined in a plugin, it overrides any existing middleware of the same name located in the `middleware/` directory.
|
|
|
|
### Global Route Middleware
|
|
|
|
Global route middleware can be defined in two ways:
|
|
|
|
- Pass a function directly as the first argument without a name. It will automatically be treated as global middleware and applied on every route change.
|
|
|
|
```ts [plugins/my-plugin.ts]
|
|
export default defineNuxtPlugin(() => {
|
|
addRouteMiddleware((to, from) => {
|
|
console.log('anonymous global middleware that runs on every route change')
|
|
})
|
|
})
|
|
```
|
|
|
|
- Set an optional, third argument `{ global: true }` to indicate whether the route middleware is global.
|
|
|
|
```ts [plugins/my-plugin.ts]
|
|
export default defineNuxtPlugin(() => {
|
|
addRouteMiddleware('global-middleware', (to, from) => {
|
|
console.log('global middleware that runs on every route change')
|
|
},
|
|
{ global: true }
|
|
)
|
|
})
|
|
```
|