能够使用Aurelia创建多标签界面，同时打开多个视图

Question

每个选项卡都是一个视图，每个视图都已加载并处于活动状态。当用户通过单击[x]关闭选项卡时，视图将被销毁并删除。此外，可以使用不同的变量或id多次加载单个视图。想想多个相同类型的文档。

通过转到特定路线创建视图。

这可以通过创建自己的viewmodel，添加视图集合，然后添加组件作为子视图来完成，但这会忽略浏览器历史记录。

阅读后，似乎唯一的方法是创建自己的路由器。虽然我不是Aurelia的新手，但我没有足够的信心创建自己的路由器。

问题是如何维护浏览器历史记录并拥有多个活动视图。

Answer 1

在＆＃34; Patrick Walters @ PWKad＆＃34;的帮助下在gitter上，我能够将概念证明放在一起。

我将示例上传到github。链接在这里。 https://github.com/BringerOD/AureliaMultiTabExample

我们的想法是在app.js中创建路径，以处理您将要创建的所有选项卡。所有路由都需要指向一个将托管，组合和管理它们的视图模型。

您可以根据需要添加更多路线或通配符。此外，如果您的选项卡很复杂，您可以为参数创建哈希值。

我还没想出如何从浏览器历史记录中删除项目。

希望这有助于某人做同样的事情。

＆＃13;

＆＃13;

export class App {
  configureRouter(config, router) {
     
    config.map([
      { route: ['', 'shell/:section/:viewmodel/:id'], name: 'shell',      moduleId: 'shell',      nav: false, title: 'shell' }
      
    ]);

    this.router = router;
  }
}

＆＃13;

＆＃13;

＆＃13;

然后，shell页面将显示选项卡并组成视图。

＆＃13;

＆＃13;

<template>
</ul>
    <div class="container-fluid">
        <div class="row">

            <ul class="nav nav-tabs">
                <li repeat.for="workspace of controller.workSpaces" class="${workspace.isActive ? 'active' : ''}" role="presentation">
                    <a href.bind="workspace.href">
                        <button class="close" type="button">×</button> ${workspace.viewModel} &nbsp;&nbsp; </a>

                </li>
            </ul>
            <div class="container-fluid" repeat.for="workspace of controller.workSpaces">
                <div show.bind="workspace.isActive" class="container-fluid">
                    
                    <compose containerless view-model="./views/${workspace.section}/${workspace.viewModel}" model.bind="workspace" />
                </div>
            </div>

        </div>
    </div>

</template>

＆＃13;

＆＃13;

＆＃13;