@empathyco/x-components/docs/API-reference/components/url/x-components.url-handler.md

Empathy X Components

---

title: UrlHandler

---

# UrlHandler

This component manages the browser URL parameters to preserve them through reloads and browser
history navigation. It allow to configure the default url parameter names using its attributes.
This component doesn't render elements to the DOM.

## Events

This component emits the following events:

- [`ParamsLoadedFromUrl`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
- [`ExtraParamsLoadedFromUrl`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
- [`UserOpenXProgrammatically`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)

## See it in action

This component manages the browser URL parameters to preserve them through reloads and browser
history navigation. It allow to configure the default url parameter names using its attributes. This
component doesn't render elements to the DOM.

_Try to make some requests and take a look to the url!_

```vue
<template>
  <UrlHandler />
</template>

<script>
import { UrlHandler } from '@empathyco/x-components/url-handler'

export default {
  name: 'UrlHandlerDemo',
  components: {
    UrlHandler,
  },
}
</script>
```

### Play with props

In this example, the `UrlHandler` component changes the following query parameter names:

- `query` to be `q`.
- `page` to be `p`.
- `filter` to be `f`
- `sort` to be `s`

_Try to make some requests and take a look to the url!_

```vue
<template>
  <UrlHandler query="q" page="p" filter="f" sort="s" />
</template>

<script>
import { UrlHandler } from '@empathyco/x-components/url-handler'

export default {
  name: 'UrlHandlerDemo',
  components: {
    UrlHandler,
  },
}
</script>
```

### Play with events

The `UrlHandler` will emit the `ParamsLoadedFromUrl` when the page is loaded.

The `UrlHandler` will emit the `ExtraParamsLoadedFromUrl` when the page is loaded with an extra
param configured and with a value in URL.

The `UrlHandler` will emit the `UserOpenXProgrammatically` when the page is loaded with a query in
the URL.