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

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";
    }
}

在上面的代码中,'navigationInstruction'是未定义的.因此,我的解决方案不能很好地工作.有没有人有其他解决方案？非常感谢!

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.jsapp root 的文件.此文件应与您当前的文件类似app.js.你可以在这个文件中做任何你想做的事情,它是相应的视图,它将与你的主应用程序完全分开.

要导航回主应用程序,您需要调用app.setRoot('app'),这意味着您需要将Aurelia对象注入Login视图模型.

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

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

有关详细信息,请参阅此处的完整文章:Aurelia登录最佳实践