vuorinem/app.html

## app.html
<template>
  <h1>App View</h1>

  <p>
    <a route-href="route: child">Child</a>
  </p>

  <router-view></route-view>
</template>

## app.js
export class App {

  configureRouter(config, router){
    this.router = router;

    config.map([
      {
        route: "",
        redirect: "child",
      },
      {
        name: "child",
        route: "child",
        moduleId: "child",
        nav: true,
      }
    ]);
  }

}

## child.html
<template>
  <h2>Child View</h2>

  <p>
    <a route-href="route: first">First</a>
    | <a route-href="route: second">Second</a>
  </p>

  <router-view></route-view>
</template>

## child.js
export class App {

  configureRouter(config){
    console.log('Configuring App Router');

    config.map([
      {
        route: "",
        redirect: "first",
      },
      {
        name: "first",
        route: "first",
        moduleId: "first",
      },
      {
        name: "second",
        route: "second",
        moduleId: "second",
      }
    ]);
  }

}

## first.html
<template>

  <b>Second fragment generated in activate(): </b>${ secondInActivate }<br />
  <b>Second fragment generated in attached(): </b>${ secondInAttached }

</template>

## first.js
import { inject } from "aurelia-framework";
import { Router } from "aurelia-router";

@inject(Router)
export class First {
  constructor(router){
    this.router = router;
  }

  activate(){
    this.secondInActivate = this.router.generate("second");
  }

  attached(){
    this.secondInAttached = this.router.generate("second");
  }
}

## 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>

## second.js
export class Second {
}
	<template>
	<h1>App View</h1>

	<p>
	<a route-href="route: child">Child</a>
	</p>

	<router-view></route-view>
	</template>
	export class App {

	configureRouter(config, router){
	this.router = router;

	config.map([
	{
	route: "",
	redirect: "child",
	},
	{
	name: "child",
	route: "child",
	moduleId: "child",
	nav: true,
	}
	]);
	}

	}
	<template>
	<h2>Child View</h2>

	<p>
	<a route-href="route: first">First</a>
	\| <a route-href="route: second">Second</a>
	</p>

	<router-view></route-view>
	</template>
	export class App {

	configureRouter(config){
	console.log('Configuring App Router');

	config.map([
	{
	route: "",
	redirect: "first",
	},
	{
	name: "first",
	route: "first",
	moduleId: "first",
	},
	{
	name: "second",
	route: "second",
	moduleId: "second",
	}
	]);
	}

	}
	<template>

	<b>Second fragment generated in activate(): </b>${ secondInActivate }<br />
	<b>Second fragment generated in attached(): </b>${ secondInAttached }

	</template>
	import { inject } from "aurelia-framework";
	import { Router } from "aurelia-router";

	@inject(Router)
	export class First {
	constructor(router){
	this.router = router;
	}

	activate(){
	this.secondInActivate = this.router.generate("second");
	}

	attached(){
	this.secondInAttached = this.router.generate("second");
	}
	}
	<!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>