super simple router

dynamic-component.html

<header> some page header </header>
{{#if page}}
<page/>
{{/if}}

dynamic-component.js

new Ractive({
	el: '#app',
	template: '#template',
	data: {
		page: false
	},
	components: {
		page: function(){
			var route = this.get('route');
			return this.components[route || 'home'];
		}
	},
	oninit: function(){
		this.observe('route', function(route){
			if(route){
				this.reset({
					page: true,
					route: route
				});	
			} else {
				this.set('page', false);
			}
		});
	}
});

dynamic-partial-component.html

<header> some page header </header>

{{>getComponent(name)}}

dynamic-partial-component.js

// requires including parsing at runtime
data: {
	getComponent: function(view){
          if(!view) { return 'loading'; }
          if(!!this.partials[view]) return view;
          this.partials[view] = '<' + view + ' board="{{board}}" user="{{user}}" isRoot="true"/>';
          return view;
      }
},

explicit-routes.html

<!-- routes could be managed explicitly in the template -->
<header> some page header </header>

{{#if page === 'contact'}}
	<contact/>
{{else if page === 'settings'}}
	<settings/>
{{else if page === 'whatever'}}
	<dance-break/>
{{/if}}

simple-router.js

window.onhashchange = function load(){
	var hash = location.hash.replace('#','').split('/'),
	    View = Ractive.components[hash[0]] || Ractive.components.home;

	new View({
		el: '#app',
		data: { id: hash[1] }
	});
}
load();