Question

背景

我有一个典型的网页应用程序，左栏菜单;和内容的右栏。

如果我在左侧列中放置一个菜单并使用右侧的<router-view></router-view>，那么您可能会在导航路线时换出内容。

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

问题

如果我为这两条路线添加布局，则菜单会在更改路线时失去其状态。即应用的＆＃34;活跃的＆＃34;由于重新加载布局而不是仅重新加载插槽，因此样式丢失。 gist.run here：
app.js：

config.map([
  { route: '', name: 'home', moduleId: 'home', layoutView: "layout.html", layoutViewModel: "layout" },
  { route: 'page', name: 'page', moduleId: 'page', layoutView: "layout.html", layoutViewModel: "layout" }
]);

的layout.html：

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

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

<template>
  Home
</template>

请注意，此处不需要插槽（例如<div slot="name">...），因为只有一个插槽。我试过加入它们，结果是一样的。

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

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

有什么方法可以让布局的行为与路由器视图相同（保持＆＃34;状态＆＃34;）？

作为解决方法，我考虑过：

我从当前路线放在一起的初始状态（可能会变得混乱或没有覆盖所有选项）
以某种方式在服务或单身中保存状态，但我无法弄清楚这是否可以通过视图
路由器视口。不太灵活，因为我不能有多个不同的app.html，不同的视口以不同的方式布局。它还需要每个视口模块或其他技巧，并且不能使用与插槽相同的视图中的所有内容...

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

感谢。

Answer 1

我昨天刚刚在Aurelia Gitter room询问了这个问题，我得到的回应是布局生命周期与路由模块的生命周期有关。在实践中，这意味着：

如果您的activationStrategy为refresh，即使导航到具有不同参数的相同路线，布局也会被销毁并重新创建。

如果您的activationStrategy为invokeLifecycle，如果您导航到相同的路线，则不的布局将被销毁并重新创建，但它<如果你导航到另一条路线，em>将。

因此，如果您想要保留在父结构中的状态，并且仍然能够在每个路径上有多个位置来投影内容，那么视口是可行的方式，请注意已经注意到了。

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

1 个答案: