<pacem-router> keeps the URL and your page in sync: it reads the address into a state, and turns state changes back into addresses (with history, back button and all). This very site runs on one: #router, with template /{package}/{view}.

<pacem-router id="router" template="/{package}/{view}"></pacem-router>

<!-- the page follows the URL -->
<pacem-view url="{{ '/views/' + #router.state.package + '/' + #router.state.view + '.html' }}"></pacem-view>

Usage

Template → state. Curly segments of the template become properties of state; a ? makes one optional. state also carries $path, $query (the querystring, as an object) and $hash.

<!-- /shop/cups/42?tab=reviews → { section: 'shop', category: 'cups', id: '42', $query: { tab: 'reviews' } } -->
<pacem-router template="/{section}/{category}/{id?}"></pacem-router>

Go somewhere. Set path, or call navigate() with a path or a partial state: it merges into the current one, segments fill the template, leftovers go to the querystring.

<pacem-button on-click="#router.navigate({ tab: 'reviews' })">reviews</pacem-button>
<pacem-a href="/core/data" router="#router">the data page</pacem-a>

Put UI state in the URL (a tab, a filter, a page number) and you get sharing, reloads and the back button for free.

Before and after. On window, navigating fires before each navigation and is cancelable (preventDefault() stays put); navigate fires once it's done. A <pacem-beforeunload active="{{ … }}"> uses navigating (and the browser's own beforeunload) to ask before leaving.

scroll-restoration (on by default) brings back the scroll position on back/forward, and scrolls new pages to the top.

Examples

A search you can share

The query lives in the URL (?q=): search, then copy the address or reload, and the results are still there.

"You have unsaved changes"

Type in the draft, then follow the link (or reload): <pacem-beforeunload> asks first, since the draft is dirty.