<header>
  <h1>App test</h1>
  <nav>
    <ul>
      <li><Link to='/home'>Home</Link></li>
      <li><Link to='/about/bob'>About Bob</Link></li>
      <li><Link to='/about/alice'>About Alice</Link></li>
    </ul>
  </nav>

  <div id='content'></div>
</header>

<script>
import createRouter from './services/createRouter';
import Home from './components/Home.html';
import About from './components/About.html';
import Link from './components/Link.html';

const router = createRouter({
  '/': '/home',
  '/home': Home,
  '/about/:name': About,
});

export default {
  onrender() {
    router.start(window.location, window.document.querySelector('#content'));
  },

  onteardown() {
    router.teardown();
  },

  components: {
    Link,
    Home,
    About,
  }
}
</script>

<header>
  <h1>App test</h1>
  <nav>
    <ul>
      <li><Link to='/home'>Home</Link></li>
      <li><Link to='/about/bob'>About <em>Bob</em></Link></li>
      <li><Link to='/about/alice'>About <strong>Alice</strong></Link></li>
    </ul>
  </nav>

  <div id='content'></div>
</header>

<script>
import createRouter from './services/createRouter';
import Home from './components/Home.html';
import About from './components/About.html';
import Link from './components/Link.html';

const router = createRouter({
  '/': '/home',
  '/home': Home,
  '/about/:name': About,
});

export default {
  onrender() {
    router.start(window.location, window.document.querySelector('#content'));
  },

  onteardown() {
    router.teardown();
  },

  components: {
    Link,
    Home,
    About,
  }
}
</script>

Add some other html to children of Link to show off nested content
Add some other html to children of Link to show off nested content
