Layout 奥雷莉亚：模板制作。在另一个模板中包含模板

我想为我的Aurelia应用程序使用两种布局。 主页-常见问题解答-登录页面不包含边栏； 但其他所有内容都包含此侧边栏

我的架构（带有侧边栏）在HTML中非常复杂，如下所示：

div.container
   div.sidebar
     div.sidebar_content
     div.site_content

因此，我不能仅仅启用或禁用侧边栏，因为它包含视图。 我必须创建两个类似于main.js中定义的“app.html”的页面，但是如何告诉Aurelia“为这个页面选择app.html，为另一个页面选择app2.html”

我找到了setRoot函数，但它有bug（当我更改setRoot时，路由不能正常工作）

---

感谢您的回答

路由器支持“布局”的概念。这里有文档记录：

基本上，您可以为每个路由指定一个布局（您可以在

路由器视图

自定义元素上指定默认布局：

app.html

 <router-view layout-view="./layout-with-sidebar.html"></router-view>

<template>
  <div class="container">
    <div class="row">
      <div class="col-sm-2">
        <slot name="sidebar"></slot>
      </div>
      <div class="col-sm-10">
        <slot name="main-content"></slot>
      </div>
    </div>
  </div>
</template>

<template>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <slot name="main-content"></slot>
      </div>
    </div>
  </div>
</template>

<template>
  <div slot="sidebar">
    <p>I'm content that will show up on the right.</p>
  </div>
  <div slot="main-content">
    <p>I'm content that will show up on the left.</p>
  </div>
</template>

<template>
  <div slot="main-content">
    <p>Look ma! No sidebar!</p>
  </div>
</template>

带有侧边栏的布局。html

 <router-view layout-view="./layout-with-sidebar.html"></router-view>

<template>
  <div class="container">
    <div class="row">
      <div class="col-sm-2">
        <slot name="sidebar"></slot>
      </div>
      <div class="col-sm-10">
        <slot name="main-content"></slot>
      </div>
    </div>
  </div>
</template>

<template>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <slot name="main-content"></slot>
      </div>
    </div>
  </div>
</template>

<template>
  <div slot="sidebar">
    <p>I'm content that will show up on the right.</p>
  </div>
  <div slot="main-content">
    <p>I'm content that will show up on the left.</p>
  </div>
</template>

<template>
  <div slot="main-content">
    <p>Look ma! No sidebar!</p>
  </div>
</template>

没有侧边栏的布局。html

 <router-view layout-view="./layout-with-sidebar.html"></router-view>

<template>
  <div class="container">
    <div class="row">
      <div class="col-sm-2">
        <slot name="sidebar"></slot>
      </div>
      <div class="col-sm-10">
        <slot name="main-content"></slot>
      </div>
    </div>
  </div>
</template>

<template>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <slot name="main-content"></slot>
      </div>
    </div>
  </div>
</template>

<template>
  <div slot="sidebar">
    <p>I'm content that will show up on the right.</p>
  </div>
  <div slot="main-content">
    <p>I'm content that will show up on the left.</p>
  </div>
</template>

<template>
  <div slot="main-content">
    <p>Look ma! No sidebar!</p>
  </div>
</template>

home.html

 <router-view layout-view="./layout-with-sidebar.html"></router-view>

<template>
  <div class="container">
    <div class="row">
      <div class="col-sm-2">
        <slot name="sidebar"></slot>
      </div>
      <div class="col-sm-10">
        <slot name="main-content"></slot>
      </div>
    </div>
  </div>
</template>

<template>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <slot name="main-content"></slot>
      </div>
    </div>
  </div>
</template>

<template>
  <div slot="sidebar">
    <p>I'm content that will show up on the right.</p>
  </div>
  <div slot="main-content">
    <p>I'm content that will show up on the left.</p>
  </div>
</template>

<template>
  <div slot="main-content">
    <p>Look ma! No sidebar!</p>
  </div>
</template>

我很满意它会出现在右边

我很满意它会出现在左边

无侧边栏.html

 <router-view layout-view="./layout-with-sidebar.html"></router-view>

<template>
  <div class="container">
    <div class="row">
      <div class="col-sm-2">
        <slot name="sidebar"></slot>
      </div>
      <div class="col-sm-10">
        <slot name="main-content"></slot>
      </div>
    </div>
  </div>
</template>

<template>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <slot name="main-content"></slot>
      </div>
    </div>
  </div>
</template>

<template>
  <div slot="sidebar">
    <p>I'm content that will show up on the right.</p>
  </div>
  <div slot="main-content">
    <p>I'm content that will show up on the left.</p>
  </div>
</template>

<template>
  <div slot="main-content">
    <p>Look ma! No sidebar!</p>
  </div>
</template>

看，妈！没有侧边栏