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

What

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.

Why

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.

How

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

Main Features

• Hash-based client side routing with working back/forward buttons and bookmarking
• Uses route attribute to associate a particular HTML tag with a route
• Simple static route configuration or advanced partial-url matching via RegExp
• Injects route meta into BODY tag for CSS-based section/page customization
• Event-driven core responds to a full compliment of client-side actions and conditions
• Parses GET-style parameters on hash fragments (#internal/employees/lookup?name=fred&age=21)

Unique Features

• Fully declarative HTML config, no custom JavaScript required
• Multiple Route Matching - Display many fragments from one url, not just full pages
• Can work without JavaScript, albeit in a very limited manner that only shows/hides exact route matches (disable js to preview)
• document.title updating based on link text or another property
• HTML body tag attrib population for easy CSS integration ([data-nav-page], [data-nav-section], [data-nav-sub], [data-nav-path] )
• Temporary body tag attrib for indicating navigation changes [data-navigating]
• Built in 404 error handling for missing routes
• JSON-compatible history tracks meta, duration, scroll position, referring link, and more for predictive caching, analytics, custom undo via back, auto-UI-customization, etc
• Toggles classes on anchors linking to the current route
• Auto re-renders visible veneer-mustache templates for up-to-the-minute views
• Events - alternatives for load, hashchange, and beforeunload, as well as novel route and leave events on matched sections

Event object properties

{
	href:	"http://danml.com/veneer/demos/routing.html#search?name=fred&age=29", // full full url
	url: 	"search?name=fred&age=29", // full hash url
	argv: [		// array non-null hash path segments
		"search"
	],
	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

route

fires on a tag with a [route] that is becoming active, like onload() - demo

leave

fires on a tag with a [route] that is becoming in-active, like onunload() - demo

routechange

fires on window and the veneer-router tag whenever a route is activated, like onhashchange() - see console for demo

onroute

an attrib-based event (aka inline) that fires when the tag is becoming active - demo

onleave

an attrib-based event (aka inline) that fires when the tag is becoming inactive, like onbeforeunload() - demo. Returning false cancels navigation. - demo

routed

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

This is an unload demo, so now go back.

History

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

Remote Data Example - Choose State to See Largest Counties

Choose a Staff Member for Details in a Modal

This example just displays the query parameters, see the remote content demo for a front end / back end integration.