每次路线更改时都会重新创建Aurelia布局

背景

我有一个典型的web应用程序，它有一个左列菜单；和内容的右栏

如果我将菜单放在左栏，并在右栏使用

，正如您所期望的那样，在导航路线时内容会被调出

看一个基本的。这显然不是我的实际应用程序，所以请忽略过度简化。您可以通过单击它更改样式的一个菜单项，然后单击其中一个主页/页面链接来查看，该菜单项将保留其应用的类

问题

如果我为这两条管线添加布局，则在更改管线时，菜单将失去其状态。i、 e.应用的“活动”样式丢失，因为重新加载布局，而不仅仅是重新加载插槽：
app.js：

layout.html：

<template>
  <!-- left menu content here -->
  <div class="layout">
  <!-- route view on right: -->
    <slot></slot>
  </div>
</template>

My home.html和route.html页面与前面的要点相同，没有布局：

<template>
  Home
</template>

家

请注意，此处不需要插槽（例如，

…

），因为只有一个插槽。我试着把它们包括在内，结果是一样的

我希望布局/路由器的行为看起来应该是一样的——布局不会在每次路由更改时重新加载——即使它下面的连线不同

这是一个问题，因为我可能在菜单项上有动画（滑动、下拉、活动类等），我不希望每次更改路线时都从默认位置开始。我可能在左侧面板中也有一些控件，如搜索框或其他表单，并且可能不希望每次更改路线时都刷新这些控件

有什么方法可以使布局与路由器视图的行为相同（保持“状态”）吗？

作为一种解决方法，我考虑：

• 我根据当前路线整理的初始状态（可能会变得混乱或无法涵盖所有选项）
• 以某种方式在服务或单例中保存状态，但我不知道在视图中是否可以这样做
• 路由器视口。不是很灵活，因为我不能有多个不同的app.html，不同的视口以不同的方式布置。它还需要每个视口都有一个模块或其他技巧，并且不能像插槽一样从同一个视图中获取所有内容

请告诉我我还能做什么，或者我做错了什么

---

谢谢。

我昨天在上一次会议上问了这个问题，我得到的答复是布局生命周期与路由模块的生命周期相关联。实际上，这意味着：

• 如果您的

  激活策略

  为

  刷新

  ，则即使导航到具有不同参数的同一路线，布局也将被破坏并重新创建
• 如果您的

  activationStrategy

  是

  invokeLifecycle

  ，则当您导航到同一路线时，布局不会被破坏并重新创建，但当您导航到其他路线时，布局会被破坏并重新创建

因此，如果您希望在父结构中保留某些状态，并且仍然能够在每个管线上投影内容的多个位置，则视口是最佳选择，但您已经注意到了一些注意事项

<template>
  Home
</template>