在 Meteor 应用程序中按返回按钮时如何正确设置活动导航选项卡？

Question

我有一个多页流星应用程序，每个页面都包含一个导航模板。

我使用 Iron-router 在页面之间切换。

我通过将相应的导航链接的类设置为“活动”来指示用户在哪个页面上。

示例：navigation.html

<li class="{{navClassName 'page1'}}">
  <a href="/page1">Page 1 </a>
</li>
<li class="{{navClassName 'page2'}}">
  <a href="/page1">Page 2 </a>
</li>

在 navigation.js 中：

Template.registerHelper('navClassName', function (page) {
  if (Router.current()) {
    return Router.current().route.getName() === page ? "active" : "";
  }
});

我的问题是，当我按下浏览器的后退按钮时，page1 和 page2 链接都显示为活动状态。

如果能解决这个问题，我们将不胜感激。

Answer 1

如果无法查看您的路由定义，我会说您必须在代码中的某处重复引用第一个路由。我可以肯定地说您的全局模板助手已正确实现，因为我定义所有活动选项卡模板助手的方式与您定义的方式相同（只有很小的语法差异）。

对于您的 HTML，除了您的第 2 页锚标记引用了错误的路线外，一切看起来都很好。我建议像这样实现您的标签以利用 Iron-Router 模板助手：

<li class="{{navClassName 'page1'}}">
    <a href="{{pathFor 'page1'}}">Page 1</a>
</li>
<li class="{{navClassName 'page2'}}">
    <a href="{{pathFor 'page2'}}">Page 2</a>
</li>

使用以这种方式定义的 HTML，如果您碰巧更新了路由路径，则无需更新锚标记路径引用。它们会随着 Iron Router 提供的 pathFor 模板助手的使用而相应改变。

如果您可以编辑您的问题以包含您的路线定义逻辑，我可以帮助您解决这个问题。

Answer 2

我认为使用zimme:active-route包。

安装铁路由包

meteor add zimme:active-route

使用

<li class="{{isActiveRoute class='active' name='page1'}}">
    <a href="{{pathFor 'page1'}}">Page 1</a>
</li>
<li class="{{isActiveRoute class='active' name='page2'}}">
    <a href="{{pathFor 'page2'}}">Page 2</a>
</li>

因为它更简单。