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)

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!

<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!

<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.