Question

我想为我的Aurelia应用程序使用两种布局。主页 - 常见问题 - 登录页面不包含侧栏; 但其他一切都包含这个侧边栏。

我的架构，侧边栏在HTML中非常复杂，就像：

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

所以我不能只启用或禁用侧边栏，因为它包含视图。我必须制作两个页面，如“app.html”，在main.js中定义，但如何告诉Aurelia“为此页面选择app.html，为另一个页面选择app2.html”？

我找到了setRoot函数但是我有bug（当我改变setroot时路由不能正常工作）谢谢你的回答

Answer 1

路由器支持“布局”的概念。这在此处记录：http://aurelia.io/hub.html#/doc/article/aurelia/router/latest/router-configuration/10

基本上，您为每条路线指定布局（您可以在DateType自定义元素上指定默认布局：

<强> app.html

router-view

<强> app.js

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

<强>布局与 - sidebar.html

export class App {
  configureRouter(config, router) {
    config.title = 'Aurelia';
    var model = {
      id: 1
    };
    config.map([
      { route: ['home', ''], name: 'home', title: "Home", moduleId: 'home', nav: true },
      { route: 'no-sidebar', name: 'no-sidebar', title: "No Sidebar", moduleId: 'no-sidebar', nav: true, layoutView: 'layout-without-sidebar.html' }
    ]);
    this.router = router;
  }
}

<强>布局而不-sidebar.html

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

<强> home.html的

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

否-sidebar.html

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

Aurelia：模板。在另一个模板中包含模板

1 个答案: