PacemRouterElement is the custom element that handles the browser history state both in reading and in writing mode.

It wraps the core functionalities included in the HTML5 History API.

Template, Path and State

The router template property/attribute gets explicited in a string where curly braced trunks signify state properties, like:

/{controller}/{view}/{id?}

Given a navigated url, the router deserializes an object with the read-only controller, view and id (optional) properties. The router may be forced to update its state by calling the navigate() method.

Example:
This whole web app exploits this routing system. Feel free to lurk into the source code. Here's a hint:

<!-- router (manages current path and navigation history) -->
<pacem-router template="/{package}/{view}" path="/intro/welcome" id="router"></pacem-router>

<!-- view (renders the requested paths) -->
<pacem-view id="view" url="{{ '/views/'+ #router.state.package + '/'+ #router.state.view +'.html' }}"></pacem-view>

<!-- anchor (triggers navigation) -->
<pacem-a href="/basic/router" router="#router">
Go to router page
</pacem-a>

Navigation and State Reuse

PacemRouterElement can reuse its current state to complete templated targets, as in the following example:

<!-- suppose you're now at "/it-it/theme/colors" -->
<pacem-a href="/{culture}/basic/router" router="#router">
Go to router page (preserving the current culture)
</pacem-a>

This is particularly convenient when a global scope variable (like, for example, a culture in a multi-language application) has to be concatenated with the urls in a menu.

Only path segment placeholders get replaced, eventually (i.e. querystring parameters get not).

Navigation through State Replacement

PacemRouterElement offers a convenient navigate() method which accepts both a string path and a partial state.
When a partial state object is provided, it gets merged into the one currently active on the router and the resolved into a proper path.

Example below:

Preventing Navigation

PacemRouterElement force the window global to dispatch a couple of events:

• navigate: it confirms the happened navigation and fires after the navigation itself.
• navigating: it informs of the happening navigation, it fires before te actual navigation and can be prevented.

To properly prevent a navigation act both in a full-reload scenario (hit F5 or change browser url on the navigation bar) or during a partial navigation (router-based), you can exploit the ad-hoc PacemBeforeunloadElement custom element.

Here's a sample how to: