如何在Aurelia中的路由之间重用数据？

我在系统中有一个用户实体，下面的路由从服务器获取该实体并显示其详细信息：

routerConfiguration.map([
  // ...
  {route: 'user/:id', name: 'user-details', moduleId: './user-details'}
]);

现在我想为显示的用户显示一个编辑表单。我有以下要求：

编辑表单应该有一个单独的URL地址，这样可以很容易地发送给其他人

当用户单击用户详细信息页面上的编辑按钮时，编辑表单应使用已加载的用户实例（即，不应再次联系API以获取用户详细信息）

当用户单击用户详细信息页面上的“编辑”按钮，然后单击浏览器中的“上一步”按钮时，他将再次看到详细信息页面，而不显示编辑表单

第一次尝试

我试图将编辑表单定义为单独的页面：

routerConfiguration.map([
  // ...
  {route: 'user/:id/edit', name: 'user-edit', moduleId: './user-edit'}
]);

这通过了#1和#3要求，但在打开编辑表单时必须再次加载用户

我不知道如何在两条路线之间走私一些海关数据。如果我可以将预加载的用户实例传递给编辑路由，并且编辑组件将使用它，或者在没有提供的情况下加载一个新实例（例如，用户直接访问URL），那就太完美了。我只找到了

第二次尝试

我决定在模式中显示编辑表单，并在出现

？action=edit

GET参数时自动显示它。代码的灵感来源于以下问题：

export class UserDetails {
  // constructor
  activate(params, routeConfig) {
    this.user = /* fetch user */;
    this.editModalVisible = params.action == 'edit';
  }
}

当用户单击编辑按钮时，执行以下代码：

displayEditForm() {
  this.router.navigateToRoute('user/details', {id: this.user.id, action: 'edit'});
  this.editModalVisible = true;
}

这将通过#1（编辑url为

user/123？action=edit

）和#2（用户实例仅加载一次）。但是，当用户单击“后退浏览器”按钮时，URL会根据需要从

user/123？action=edit

更改为

user/123

，但我不知道如何检测它并隐藏编辑表单（不再调用

activate

方法）。因此，此解决方案不符合#3要求

编辑：

事实上，我发现我可以通过事件聚合器检测URL更改并隐藏编辑表单：

ea.subscribe("router:navigation:success", 
  (event) => this.editModalVisible = event.instruction.queryParams.action == 'edit');

但是，我还是想知道是否有更好的方法来实现这一点

问题是

---

如何以干净直观的方式处理这种情况？

添加一个用作模型的用户类，并在视图模型中使用依赖项注入如何

export class User {
    currentUserId = 0;
    userData = null;

    retrieve(userId) {
        if (userId !== this.currentUserId) {
            retrieve the user data from the server;
            place it into this.userData;

        }

        return this.userData;
    }
}

---

类似于当前显示的用户单例？它确实应该有效，但我觉得它违反了SRP。谢谢你的建议！我看不出它是如何违反SRP的。您有视图、视图模型和模型。这将是客户端上与服务器交互的用户模型。