Javascript 如何在Aurelia中渲染不同的视图结构？

我的app.html中有一个通用的html结构，以便应用于所有页面：

<template>
<require from="header"></require>
<require from="side-bar"></require>
<require from="theme-panel"></require>
<require from="footer"></require>
<!-- BEGIN HEADER -->
<js-header></js-header>
<!-- END HEADER -->

<div class="clearfix"></div>

<!-- BEGIN CONTAINER -->
<div class="container">
    <div class="page-container">
        <!-- BEGIN SIDEBAR -->
        <js-side-bar></js-side-bar>
        <!-- END SIDEBAR -->
        <div class="page-content-wrapper">
            <div class="page-content">
                <!-- BEGIN STYLE CUSTOMIZER(optional) -->
                <js-theme-panel></js-theme-panel>
                <!-- END STYLE CUSTOMIZER -->
                <!-- BEGIN ACTUAL CONTENT -->
                <div class="fade-in-up">
                    <router-view></router-view>
                </div>
                <!-- END ACTUAL CONTENT -->
            </div>
        </div>
    </div>
    <!-- BEGIN FOOTER -->
    <js-footer></js-footer>
    <!-- END FOOTER -->
</div>
<!-- END CONTAINER -->
</template>

---

在上面的代码中，“navigationInstruction”未定义。因此，我的解决方案不能很好地发挥作用。有人有别的解决办法吗？非常感谢

尝试在部分顶部添加“if”绑定，根据每个页面的“canActivate（）”或“activate（）”过程中设置的视图模型变量选择所需的页面样式

<template>
    <template if.bind = "normalMain">
        ....
    </template>
    <template if.bind = "loginScreen">
        ....
    </template>
</template>

....
....

好问题。事实上，当您在同一个单页应用程序中有两个完全相同的部分时，正确的做法是创建多个根视图模型或shell

首先，通过将

aurelia app=“main”

添加到body标签，并创建一个名为

main.js

的新初始化文件，为应用程序设置自定义初始化。应该是这样的

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging();

  // notice that we are setting root to 'login'
  aurelia.start().then(app => app.setRoot('login'));
}

app.setRoot（'login'）

行告诉Aurelia加载一个名为

login.js

的文件作为app根目录。此文件应与当前的

app.js

类似。你可以在这个文件及其相应的视图中做任何你想做的事情，它将与你的主应用程序完全分离

要导航回主应用程序，您需要调用

app.setRoot（'app'）

，这意味着您需要将Aurelia对象注入登录视图模型

import { inject, Aurelia } from 'aurelia-framework';

@inject(Aurelia)
export class Login {
  constructor(aurelia) {
    this.aurelia = aurelia;
  }
  goToApp() {
    this.aurelia.setRoot('app');
  }
}

---

有关更多信息，请参阅我在此处的全文：

请务必投票并接受此答案（如果它为您所用）：）非常感谢！你解决了我的问题。非常感谢你的帮助！博客域似乎不再处于活动状态（已过期）。。是否有更新的地址？此方法是否仍然有效？我试过了，但在应用程序虚拟机中的登录视图“卡住”时出现问题。编辑：没关系，我的问题是我把上下文开关放在了“激活”而不是构造函数中。如果有人遇到这个问题，我会试试这个解决方案。非常感谢您的支持！我在这里写了一个例子来说明这个概念：

import { inject, Aurelia } from 'aurelia-framework';

@inject(Aurelia)
export class Login {
  constructor(aurelia) {
    this.aurelia = aurelia;
  }
  goToApp() {
    this.aurelia.setRoot('app');
  }
}