funky-jojo/app.html

## app.html
<template>
  <h1>${message}</h1>

  <h3>Steps to demonstrate:</h3>

  <div><a href="https://gist.host/run/1472695581644/index.html#/children/child2" target="_blank">
  Click to load "#/children/child2" in a new tab</a> ( redirect("children/child1") works)
  </div>
  <br>
    <div><button click.trigger="navigateToChild2()">Go</button>
  Navigate to "#/children/child2"  ( redirect("children/child1") does not work, because it's apparently expecting a relative child route)</div>

  <br>
    <div><button click.trigger="navigateToChild3()">Go</button>
  Navigate to "#/children/child3"  ( redirect("child1") works.)</div>


  <div style="border: solid 1px #ddd; padding: 20px; margin: 20px;">
    <router-view></router-view>
  </div>
</template>

## app.js
export class App {
  message = 'This is the app host';

      configureRouter(config, router) {
        config.map([
            { route: '', redirect: 'children' },
            { route: 'children', moduleId: 'children' }
        ]);

        this.router = router;

    }

    navigateToChild2(){
      //no works
      this.router.navigate("children/child2");
    }

    navigateToChild3(){
      //works
      this.router.navigate("children/child3");
    }
}

## child1.html
<template>
  <h4>${message}</h4>
</template>

## child1.js
export class Child1{
   message = "child 1";
}

## child2.html
<template>
  <h4>${message}</h4>
</template>

## child2.js
import {Redirect} from "aurelia-router";

export class Child2{
   message = "child 2";

   canActivate(){
     //this works from fresh page load, but not if you navigate to it
     return new Redirect("children/child1");
   }
}

## child3.html
<template>
  <h4>${message}</h4>
</template>

## child3.js
import {Redirect} from "aurelia-router";

export class Child3{
   message = "child 3";

   canActivate(){
     //this works as long as you navigate to it, but not from fresh page load.
     return new Redirect("child1");
   }
}

## children.html
<template>
  <h2>${message}</h2>
  <div style="border: solid 1px #ddd; padding: 20px; margin: 20px;">
    <router-view></router-view>
  </div>
</template>

## children.js
export class Children {
  message = 'This is the child router host';

      configureRouter(config, router) {
        config.map([
            { route: '', redirect: 'child1'},
            { route: 'child1', moduleId: 'child1' },
            { route: 'child2', moduleId: 'child2' },
            { route: 'child3', moduleId: 'child3' }
        ]);

        this.router = router;

    }

}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body aurelia-app>
    <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>
	<template>
	<h1>${message}</h1>

	<h3>Steps to demonstrate:</h3>

	<div><a href="https://gist.host/run/1472695581644/index.html#/children/child2" target="_blank">
	Click to load "#/children/child2" in a new tab</a> ( redirect("children/child1") works)
	</div>
	<br>
	<div><button click.trigger="navigateToChild2()">Go</button>
	Navigate to "#/children/child2" ( redirect("children/child1") does not work, because it's apparently expecting a relative child route)</div>

	<br>
	<div><button click.trigger="navigateToChild3()">Go</button>
	Navigate to "#/children/child3" ( redirect("child1") works.)</div>


	<div style="border: solid 1px #ddd; padding: 20px; margin: 20px;">
	<router-view></router-view>
	</div>
	</template>
	export class App {
	message = 'This is the app host';

	configureRouter(config, router) {
	config.map([
	{ route: '', redirect: 'children' },
	{ route: 'children', moduleId: 'children' }
	]);

	this.router = router;

	}

	navigateToChild2(){
	//no works
	this.router.navigate("children/child2");
	}

	navigateToChild3(){
	//works
	this.router.navigate("children/child3");
	}
	}
	import {Redirect} from "aurelia-router";

	export class Child2{
	message = "child 2";

	canActivate(){
	//this works from fresh page load, but not if you navigate to it
	return new Redirect("children/child1");
	}
	}
	import {Redirect} from "aurelia-router";

	export class Child3{
	message = "child 3";

	canActivate(){
	//this works as long as you navigate to it, but not from fresh page load.
	return new Redirect("child1");
	}
	}
	<template>
	<h2>${message}</h2>
	<div style="border: solid 1px #ddd; padding: 20px; margin: 20px;">
	<router-view></router-view>
	</div>
	</template>
	export class Children {
	message = 'This is the child router host';

	configureRouter(config, router) {
	config.map([
	{ route: '', redirect: 'child1'},
	{ route: 'child1', moduleId: 'child1' },
	{ route: 'child2', moduleId: 'child2' },
	{ route: 'child3', moduleId: 'child3' }
	]);

	this.router = router;

	}

	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body aurelia-app>
	<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>