Client configuration

Routify's client can be configured by passing options to the Router component.

Example

<script>
  import { Router } from '@roxi/routify'

  const config = {
    queryHandler: {
      parse: search => fromEntries(new URLSearchParams(search)),
      stringify: params => '?' + (new URLSearchParams(params)).toString()
    },
    urlTransform: {
      apply: url => `/my-base${url}`, //external URL
      remove: url => url.replace('/my-base', ''), //internal URL
    },
    useHash: true
  }
</script>

<Router {config} />

Options

Name	Type	Default value
queryHandler	object	shown in example
Parses overloaded params to and from the URL query
urlTransform	object	{ apply: x => x, remove: x => x }
Transforms URL to internal/external
useHash	boolean	false
Enable hash based navigation

Disabling auto-scrolling

By default, Routify will scroll back to the top of the page after a route change. If you want to prevent this, you can add

data-routify="scroll-lock"

to the element you don't want scrolled.

Example

<div data-routify="scroll-lock">
  <!-- Content you don't want scrolled to the top. -->
</div>

<!-- Or on the body tag -->
<script>
  document.body.dataset.routify = 'scroll-lock'
</script>

Writing good documentation that is up-to-date is difficult. If you notice a mistake, help us out.