Question

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

但是，就我而言，我有一个登录页面，与其他页面的结构完全不同。在我的app.js中，我尝试使用getViewStrategy（）方法来控制我将呈现的视图如下：

activate(params, routeConfig, navigationInstruction){
    this.navigationInstruction = navigationInstruction;
    //console.log("params", params); // undefined
    //console.log("routeConfig", routeConfig); // undefined
    //console.log("navigationInstruction", navigationInstruction); // undefined
    //console.log("router", router); //undefined
}
getViewStrategy(){
    if(this.navigationInstruction == 'login'){
        return "app_login.html";
    } else {
        return "app.html";
    }
}

在上面的代码中，＆＃39; navigationInstruction＆＃39;未定义。因此，我的解决方案不能很好地工作。有没有人有其他解决方案？非常感谢！

Answer 1

好问题。实际上，当你有两个相同的单页面应用程序的完整部分时，正确的做法是创建多个根视图模型或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 root。此文件应与您当前的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');
  }
}

有关详情，请参阅我的完整文章：Aurelia Login Best Practices

Answer 2

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

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

如何在Aurelia中呈现不同的视图结构？

2 个答案: