title: Aurelia Child Route by using Multiple <router-view></router-view>
body: <p>I want to implement child routes using Aurelia Framework.</p>
  
  <p>I am not looking for this solution as shown in the following link, <a href="http://www.cmichaelgraham.io/aurelia-typescript-samples/aurelia-typescript-samples/multi-level-menu.html" rel="nofollow">multi-level-menu</a>.</p>
  
  <p>Below is the code:</p>
  
  <blockquote>
    <p><strong>app.html</strong></p>
  </blockquote>
  
  <pre><code>&lt;div class="page-host"&gt;
       &lt;router-view&gt;&lt;/router-view&gt;
  &lt;/div&gt;
  </code></pre>
  
  <blockquote>
    <p><strong>app.js/app.ts</strong></p>
  </blockquote>
  
  <pre><code>var _self = this;
  this.router.configure(config =&gt; {
          config.map(this.routes);
          config.mapUnknownRoutes(instruction =&gt; {
          _self.router.navigate(_self.defaultRoute);
              return '';
          });
  
          this.router = router;
          this.sideNavObj.navigationRouteList = this.router.navigation;
          return config;
      });
  </code></pre>
  
  <blockquote>
    <p><strong>page1.html</strong></p>
  </blockquote>
  
  <pre><code>&lt;section&gt;
      &lt;h2&gt;Child Routes&lt;/h2&gt;
      &lt;div&gt;
          &lt;div class="col-md-2"&gt;
              &lt;ul class="well nav nav-pills nav-stacked"&gt;
                  &lt;li repeat.for="row of childRoutes"&gt;
                      &lt;span click.delegate="router.navigate('#/' + row.route)"&gt;${row.title}&lt;/span&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="col-md-10 childRouterDiv"&gt;
              &lt;router-view&gt;&lt;/router-view&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <blockquote>
    <p><strong>page1.js/page.ts</strong></p>
  </blockquote>
  
  <pre><code>var _self = this;
  this._router.configure(config =&gt; {
          config.map(_self.childRoutes);
          return config;
      });
  </code></pre>
  
  <blockquote>
    <p><strong>Scenario:</strong></p>
  </blockquote>
  
  <p>Once you navigate to page1 the respective child routes(page 1.1, page 1.2) are coming under respective page.</p>
  
  <p>But if you navigate to page2 which is the part of main menu (not a child route or sub-menu), the composition/rendering is happening under the <code>&lt;router-view&gt;&lt;/router-view&gt;</code> of page1.html not app.html.</p>
  
  <p>Since there are two <code>&lt;router-view&gt;&lt;/router-view&gt;</code> in my DOM, the recent one is being used.</p>
  
  <p>Once I navigate to other page(s) <code>&lt;router-view&gt;&lt;/router-view&gt;</code> of app.html should be used and other(of page1.html) should be removed from the DOM.</p>
  
  <p>Thanks in advance.</p>