Meteor应用中按下返回键时如何正确设置Active Navigation Tab？

Question

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

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

我通过将适当的导航 link 的 class 设置为“活动”来指示用户所在的页面。

示例：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 link 都显示为活动状态。

如能解决此问题，我们将不胜感激。

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包。

安装iron路由器包

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>

因为比较简单

Meteor应用中按下返回键时如何正确设置Active Navigation Tab？

How Do I Properly Set Active Navigation Tab When Pressing the Back Button in Meteor Application?

javascript

css

meteor

iron-router