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 (opens new window)
• ExtraParamsLoadedFromUrl (opens new window)
• UserOpenXProgrammatically (opens new window)

Examples

This component manages the browser URL parameters to preserve them through reloads and browser history navigation. It allows you 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 at the URL!

<template>
  <UrlHandler />
</template>
<script setup>
import { UrlHandler } from '@empathyco/x-components/url-handler'
</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 at the URL!

<template>
  <UrlHandler query="q" page="p" filter="f" sort="s" />
</template>
<script setup>
import { UrlHandler } from '@empathyco/x-components/url-handler'
</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 the URL.

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