thinkOfaNumber/_fallback route bug

## _fallback route bug
.

## app.html
<template>
  <h1>App</h1>
  <p>Navigation:</p>
  <div repeat.for="r of router.navigation">
    <ul>
      <li>
        <a href.bind="r.href">${r.title}</a>
      </li>
    </ul>
  </div>
  <router-view></router-view>
</template>

## app.js
export class App {

  configureRouter(config: RouterConfiguration, router: Router) {
    config.map([
      { route: "", name: "home", moduleId: "home", nav: true, title: "home"},
      { route: "sub", name: "sub-route", moduleId: "sub/route", nav: true, title: "Sub Router"},
      { route: "fallback", name: "fallback", moduleId: "fallback", nav: false, title: "Fallback Route"}
    ]);
    config.fallbackRoute("fallback");
    this.router = router;
  }
}

## fallback.html
<template>
  <p>
    This is the fallback route. You'll notice it is hidden from the router menu, so the
    only way you could get here is by the router fallback mechanism.
  </p>
  <p>
    You were eaten by a grue. Thanks for playing!
  </p>
</template>

## fallback.js
export class Fallback {

}

## home.html
<template>
  <h2>Home</h2>
  <p>
    Click the "Sub Router" menu and follow the instructions from there.
  </p>
</template>

## home.js
export class Home {

}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet">
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>

    <script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
    <script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
    <script>
      require(['aurelia-bootstrapper']);
    </script>
  </body>
</html>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();
    //.plugin('aurelia-validation');

  aurelia.start().then(() => aurelia.setRoot());
}

## style.css
router-view {
  border: 1px solid lightgray;
  display: block;
  padding: 4px;
}

## sub\go-away.html
<template>
  <h3>You should never see this</h3>
</template>

## sub\go-away.js
export class GoAway {
  canActivate(params, routeConfig: RouteConfig, navigationInstruction: NavigationInstruction) {
    console.log("sorry, this route is invalid!");
    // some logic has determined that you can't go here
    return false;
  }
}

## sub\home.html
<template>
  <h3>Sub home</h3>
  <p>
    Right-click on the "You can't navigate here" link and open it in a new window. The point
    is to navigate to this route with no history.
  </p>
  <p>
    What <em>I would expect</em> to happen is that you are navigated to the fallback route of the sub
    router. What actually happens is that you are navigated to the fallback route of the
    main router.
  </p>
</template>

## sub\home.js
export class SubHome {

}

## sub\route.html
a<template>
  <h2>Sub Route</h2>
  <p>Navigation:</p>
  <div repeat.for="r of router.navigation">
    <ul>
      <li>
        <a href.bind="r.href">${r.title}</a>
      </li>
    </ul>
  </div>
  <router-view></router-view>
</template>

## sub\route.js
export class Route {
  configureRouter(config: RouterConfiguration, router: Router) {
    config.map([
      { route: ["", "default"], name: "home", moduleId: "sub/home", nav: true, title: "home"},
      { route: "goaway", name: "go-away", moduleId: "sub/go-away", nav: true, title: "You can't navigate here"}
    ]);

    // config.fallbackRoute(""); this doesn't work because fallbackRoute() ignores empty strings
    config.fallbackRoute("default");
    this.router = router;
  }
}
	<template>
	<h1>App</h1>
	<p>Navigation:</p>
	<div repeat.for="r of router.navigation">
	<ul>
	<li>
	<a href.bind="r.href">${r.title}</a>
	</li>
	</ul>
	</div>
	<router-view></router-view>
	</template>
	export class App {

	configureRouter(config: RouterConfiguration, router: Router) {
	config.map([
	{ route: "", name: "home", moduleId: "home", nav: true, title: "home"},
	{ route: "sub", name: "sub-route", moduleId: "sub/route", nav: true, title: "Sub Router"},
	{ route: "fallback", name: "fallback", moduleId: "fallback", nav: false, title: "Fallback Route"}
	]);
	config.fallbackRoute("fallback");
	this.router = router;
	}
	}
	<template>
	<p>
	This is the fallback route. You'll notice it is hidden from the router menu, so the
	only way you could get here is by the router fallback mechanism.
	</p>
	<p>
	You were eaten by a grue. Thanks for playing!
	</p>
	</template>
	<template>
	<h2>Home</h2>
	<p>
	Click the "Sub Router" menu and follow the instructions from there.
	</p>
	</template>
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="style.css" rel="stylesheet">
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>

	<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
	<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
	<script>
	require(['aurelia-bootstrapper']);
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging();
	//.plugin('aurelia-validation');

	aurelia.start().then(() => aurelia.setRoot());
	}
	router-view {
	border: 1px solid lightgray;
	display: block;
	padding: 4px;
	}
	export class GoAway {
	canActivate(params, routeConfig: RouteConfig, navigationInstruction: NavigationInstruction) {
	console.log("sorry, this route is invalid!");
	// some logic has determined that you can't go here
	return false;
	}
	}
	<template>
	<h3>Sub home</h3>
	<p>
	Right-click on the "You can't navigate here" link and open it in a new window. The point
	is to navigate to this route with no history.
	</p>
	<p>
	What <em>I would expect</em> to happen is that you are navigated to the fallback route of the sub
	router. What actually happens is that you are navigated to the fallback route of the
	main router.
	</p>
	</template>
	a<template>
	<h2>Sub Route</h2>
	<p>Navigation:</p>
	<div repeat.for="r of router.navigation">
	<ul>
	<li>
	<a href.bind="r.href">${r.title}</a>
	</li>
	</ul>
	</div>
	<router-view></router-view>
	</template>