如何在Aurelia中维护路由之间的视图模型中的状态？

我有一个菜单和搜索模块。在菜单和搜索之间导航时，我希望保留搜索结果和Search.js状态。我希望模块通过路由器加载，就像桌面应用程序一样，在模块“窗口”之间保持状态

App.html

<template>    
    <router-view></router-view>
</template>

Menu.js

import {inject} from "aurelia-framework";
import {PortalData} from "./portalData";

@inject(PortalData)
export class Start {

    constructor(portalData){
        this.portalData = portalData;
    }

      activate(){
        return this.portalData.getApplications()
            .then(apps => this.applications = apps);
    }  

---

最明显的解决方案是将状态存储在另一个模块中。 在两个视图中导入某个类，然后在搜索时将其存储在该类的属性中。 默认情况下，aurelia对注入类使用singleton，因此在视图之间将有一个共享实例

somestate.js

export class SomeState {

   constructor(){
      this.data = undefined;
   }

}

以两种方式导入此模块。 使用数据属性在模块之间共享数据

在根应用程序文件夹/src中创建一个名为core.js的文件或您选择的其他文件，如下所示。我在这里添加了一些额外的东西，使它更现实，但您可以简化它以满足您的特定需求。我的观点是，这个单一类可以用于很多不同的事情——搜索文本只是其中之一

/src/core.js

然后，导入core.js并将其注入到其他每个组件中，如下所示：

search.js

---

是否有一种方法可以管理状态，而不必将HTML元素与状态模块绑定，例如value.bind=state.data.SearchInput？不确定您想要实现什么。请详细说明。如果我使用SomeState来存储状态，那么我必须将所有视图绑定到SomeState的属性。我希望避免这样做，只绑定组件视图模型的属性。没有任何东西阻止您将状态属性指定给视图模型属性。

export class SomeState {

   constructor(){
      this.data = undefined;
   }

}

// Some example imports to support the common class
import { inject, noView } from 'aurelia-framework';
import { HttpClient, json } from 'aurelia-fetch-client';
import { I18N } from 'aurelia-i18n';
import { EventAggregator } from 'aurelia-event-aggregator';

@noView // this decorator is needed since there is no core.html
@inject(EventAggregator, I18N, HttpClient)
export class Core {
  value1 = "Test data 1";
  value2 = "Test data 2";
  constructor(eventAggregator, i18n, httpClient) {
    // store local handles
    this.eventAggregator = eventAggregator;
    this.i18n = i18n;
    this.httpClient = httpClient;

    // search info
    this.SearchResults = [];
  }

  myCustomFunction() {
    // some code here, available to any component that has core.js injected
  }
}

import {inject} from "aurelia-framework";
import {PortalData} from "./portalData";
import {Core} from "core";
import $ from 'jquery';

@inject(PortalData, Core)
export class Search
{
 constructor(portalData, core){
    this.portalData = portalData;
    this.core = core;
    this.criteria = "";
}

 DoSearch(startRow){    
       this.portalData.searchSevadars(criteria)
        .then(res=> this.core.SearchResults = res;         
    }
}