隐藏父视图，导航到子视图或隐藏在aurelia中的嵌套子视图中的父视图

Question

这是我的App.js

export class App {
configureRouter(config, router) {
this.router = router;
config.title = 'Aurelia';
config.map([
  { route: ['', 'home'], name: 'home', moduleId: 'home', nav: true, breadcrumb: true, title: 'HOME'},
  { route: 'about', name: 'about', moduleId: 'about', nav: true, breadcrumb: true, title: 'About Us'},
  { route: 'products', name: 'products', moduleId: 'products', nav: true, breadcrumb: true, title: 'Products'},
  { route: 'services', name: 'services', moduleId: 'services', nav: true, breadcrumb: true, title: 'Services'},
  { route: 'contact', name: 'contact', moduleId: 'contact', nav: true, breadcrumb: true, title: 'Contact'}
]);
}
}

在app.html中

<template>
<require from="bootstrap/css/bootstrap.css"></require>
<aurelia-crumbs config.bind="config"></aurelia-crumbs>
<h1 class="text-center">Wel Come to my company</h1>
<nav class="navbar navbar-inverse">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Company</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
        <li repeat.for="route of router.navigation" class="${route.isActive ? 'active' : ''}">
          <a href.bind="route.href">${route.title}</a>  
        </li>
    </ul>
  </div>
</nav> 
<router-view></router-view>
</template>

当我转到产品页面时，我有子路线，这就是我的products.js的样子

export class Products {
configureRouter(config, router) {
  this.router = router;
  config.title = 'Aurelia';
  config.map([
    { route: ['','product1'], name: 'product1', moduleId: 'product1', nav: true, breadcrumb: true, title: 'Product 1'},
    { route: 'product2', name: 'product2', moduleId: 'product2', nav: true, breadcrumb: true, title: 'Product 2'}
  ]);
}

}

而且products.html是

<template>
<require from="bootstrap/css/bootstrap.css"></require>
<h1 class="text-center">Products</h1>
<div>
    <ul>
       <li repeat.for = "row of router.navigation">
          <a href.bind = "row.href">${row.title}</a>
       </li>
    </ul> 
</div>

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

再次在我的产品2中，我有其他子路线

这里是product2.js

export class Product2 {
configureRouter(config, router) {
  this.router = router;
  config.title = 'Aurelia';
  config.map([
    { route: ['','product_2_1'], name: 'product_2_1', moduleId: 'product_2_1', nav: true, breadcrumb: true, title: 'Product_2_1'},
    { route: 'product_2_2', name: 'product_2_2', moduleId: 'product_2_2', nav: true, breadcrumb: true, title: 'Product_2_2'}
  ]);
}

}

而且product2.html是

<template>
<require from="bootstrap/css/bootstrap.css"></require>
<h1 class="text-center">Product2</h1>
<div>
    <ul>
       <li repeat.for = "row of router.navigation">
          <a href.bind = "row.href">${row.title}</a>
       </li>
    </ul> 
</div>

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

所以我的问题是，当我导航到product_2_2时，我可以看到产品和产品2页面的内容。我不希望这样，当我点击product_2_2时，我想通过隐藏product和product2内容来显示product_2_2内容。我的意思是如何隐藏产品和产品2页面的视图，这些页面内容是在一个单独的元素中。