Routing demo

/ {{^argv}}Home{{/argv}} {{#argv}} {{.}} {SEP} / {/SEP} {{/argv}} /

a content section with external content


veneer-route is a declarative HTML-based router for true single page navigation. The route tag enables single-page apps to use bookmarks, back/forward navigation, provides equivalents to onload() and onbeforeunload() events, enables wildcard route matching, auto-refreshes templates, and more. View this page's source to see how easy veneer-route is to integrate into any project.


Reloading pages is slow, but switching urls is good. The problem with doing it all client-side is that there is not a straight-forward way to provide those features with the simplicity of a server. As a result, virtually all client-side routers and "history managers" require custom javascript in a proprietary format to re-describe what the html A tag was designed for. veneer-route allows managers, designers, and anyone familiar with HTML to create a blazing fast single-load user experience, without the constraints of a framework or hand-wiring simple connections.


  1. Use normal anchor tags to link to logical url fragments Contact Us
  2. Tie html containers of content to urls with route attributes
    Coming Soon!
  3. Add the veneer script tag and a veneer-route tag to the page <veneer-route></veneer-route> <script src="/veneer/lib/veneer.full.min.js"></script>
  4. Brush up the content, enhance the UX, or tweak the CSS, that's it.

Router Features

[features section, page name starts with "u" header]

Main Features

Unique Features

Event object properties

	href:	"", // full full url
	url: 	"search?name=fred&age=29", // full hash url
	argv: [		// array non-null hash path segments
	query: {	// queryString parameters as a JS object
		name: "fred",
		age: 29  // numbers are parsed, all other types are strings
	section:	"search",// the root section
	page:		null,	// a page in a section
	sub:		null,	// a sub-section in a page
	path: 		"search",// hash path 
	date:	1413326261696,	// date stamp as number
	oldURL:	"features",	// hash path of last visit (called oldURL to mimic W3 hashchange event args)
	ref:	"search"   	// hash URL of active link tag (how you got here) 
	pos:	123,		// vertical scroll position of browser at time of event
	dur:	11.12		// route visit duration in seconds	

Navigation raises many events in different places

fires on a tag with a [route] that is becoming active, like onload() - demo
fires on a tag with a [route] that is becoming in-active, like onunload() - demo
fires on window and the veneer-router tag whenever a route is activated, like onhashchange() - see console for demo
an attrib-based event (aka inline) that fires when the tag is becoming active - demo
an attrib-based event (aka inline) that fires when the tag is becoming inactive, like onbeforeunload() - demo. Returning false cancels navigation. - demo
fires on a nav anchor (nav a, #nav a, .nav a) when it becomes active by having its linked route activate. - demo powers yellow nav link highlight

This is an unload demo, so now go .

This is an unload demo, so now go .


Integrated history makes it easy to batch-register activity with existing analytic APIs.

  1. ago @{{path}} , from [{{oldURL}}] for {{dur|veneer.hms}}
  2. {{/HISTORY}}

Remote Data Example - Choose State to See Largest Counties


{{#results}}{{.}} {SEP}-{/SEP} {{/results}}

onunload() behaviour via onleave attrib

Fill input and navigate away to demo onleave handler
favorite color:

navigated here {{|Date}}
Oops, we can't show the page at {{url}}

Back to Demos   Veneer Home