Question

我想为我的aurelia应用程序使用两个单独的布局。它们之间的区别在于，没有侧边栏。目前我正在使用如下定义的一个布局文件：

<template>
    <div class="container">
        <router-view></router-view>
    </div>
</template>

如果活动路线需要此侧边栏显示，我只需将其放入其视图中即可。我想要实现的是添加另一个默认具有此侧边栏的布局：

<template>
    <require from="../common/elements/sidemenu/sidemenu"></require>

    <div class="container">
        <sidemenu></sidemenu>
        <router-view></router-view>
    </div>
</template>

所以问题是 - 如何做到这一点？是否有可能使用aurelia应用程序有多个布局（或主页，但你称之为）？

Answer 1

使用`aurelia.setRoot()`

您可以通过在configure中指定包含index.html说明的脚本来手动设置应用程序。通常，此设置为main。

<强>的index.html

<body aurelia-app="main">

在此脚本中，您可以使用aurelia.setRoot('root')指定根视图模型。如果没有提供参数，则约定是使用'app'。

<强> main.js

aurelia.start().then(() => aurelia.setRoot());

但是，您可以在应用程序的任何位置注入aurelia对象，并随时调用setRoot函数来加载不同的根视图模型。

<强> home.js

@inject(aurelia)
export class HomeViewModel {
    constructor(aurelia) {
        this.aurelia = aurelia;
    }
    doStuff() {
        this.aurelia.setRoot('withSidebar');
    }
}

一个常见用例是拥有一个登录页面，我已为此用例创建了一个完整的模板，您可以在此处查看，克隆或分叉：http://davismj.me/portfolio/sentry/

aurelia应用程序中的两种不同布局

1 个答案:

使用`aurelia.setRoot()`

aurelia应用程序中的两种不同布局

1 个答案:

使用aurelia.setRoot()

使用`aurelia.setRoot()`