---
url: /api/symbols/workbox-swkit/routing/router.md
---

# Router

Class @vite-pwa/workbox-swkit/routing

The Router can be used to process a `FetchEvent` using one or more
workbox-routing.Route, responding with a `Response` if
a matching route exists.

If no route matches a given a request, the Router will use a "default"
handler if one is defined.

Should the matching Route throw an error, the Router will use a "catch"
handler if one is defined to gracefully deal with issues and respond with a
Request.

If a request matches multiple routes, the **earliest** registered route will
be used to respond to the request.

## Constructor

```ts
new Router()
```

Initializes a new Router.

## Methods

### addCacheListener()

```ts
addCacheListener(): void
```

Adds a message event listener for URLs to cache from the window.
This is useful to cache resources loaded on the page prior to when the
service worker started controlling it.

The format of the message data sent from the window should be as follows.
Where the `urlsToCache` array may consist of URL strings or an array of
URL string + `requestInit` object (the same as you'd pass to `fetch()`).

```
{
  type: 'CACHE_URLS',
  payload: {
    urlsToCache: [
      './script1.js',
      './script2.js',
      ['./script3.js', {mode: 'no-cors'}],
    ],
  },
}
```

### addFetchListener()

```ts
addFetchListener(): void
```

Adds a fetch event listener to respond to events when a route matches
the event's request.

### findMatchingRoute()

```ts
findMatchingRoute(options: RouteMatchCallbackOptions): { params?: MapLikeObject | string[]; route?: Route }
```

Checks a request and URL (and optionally an event) against the list of
registered routes, and if there's a match, returns the corresponding
route along with any params generated by the match.

**Returns:** An object with `route` and `params` properties.
They are populated if a matching route was found or `undefined`
otherwise.

### handleRequest()

```ts
handleRequest(options: { event: ExtendableEvent; request: Request }): Promise<Response> | undefined
```

Apply the routing rules to a FetchEvent object to get a Response from an
appropriate Route's handler.

**Returns:** A promise is returned if a
registered route can handle the request. If there is no matching
route and there's no `defaultHandler`, `undefined` is returned.

### registerRoute()

```ts
registerRoute(route: Route): void
```

Registers a route with the router.

**Parameters**

* `route` – The route to register.

### setCatchHandler()

```ts
setCatchHandler(handler: RouteHandler): void
```

If a Route throws an error while handling a request, this `handler`
will be called and given a chance to provide a response.

**Parameters**

* `handler` – A callback
  function that returns a Promise resulting in a Response.

### setDefaultHandler()

```ts
setDefaultHandler(handler: RouteHandler, method?: HTTPMethod): void
```

Define a default `handler` that's called when no routes explicitly
match the incoming request.

Each HTTP method ('GET', 'POST', etc.) gets its own default handler.

Without a default handler, unmatched requests will go against the
network as if there were no service worker present.

**Parameters**

* `handler` – A callback
  function that returns a Promise resulting in a Response.

* `method` – The HTTP method to associate with this
  default handler. Each method has its own default.

### unregisterRoute()

```ts
unregisterRoute(route: Route): void
```

Unregisters a route with the router.

**Parameters**

* `route` – The route to unregister.