如何在流星应用程序中按下后退按钮时正确设置活动导航选项卡

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

本文关键字：设置 活动 选项 导航 按钮 流星 应用程序      更新时间：2023-09-26

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

我用铁路由器来切换页面。

我通过将相应的导航链接的类设置为"active"来指示用户在哪个页面。

例子:navigation.html 

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

和

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

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

如果不能看到你的路由定义，我会说你必须在代码的某个地方有对第一个路由的重复引用。我可以肯定地说，你的全局模板帮助器是正确实现的，因为我定义我所有的活动选项卡模板帮助器的方式与你定义你的相同(只有很小的语法差异)。

对于你的HTML，一切看起来都很好，除了你的页面2锚标记引用错误的路由。我建议像这样实现你的标签，以利用铁路由器模板帮助器:

<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模板助手的使用而相应改变。

如果你能编辑你的问题，包括你的路由定义逻辑，我可以帮助你更多地解决这个问题。

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

install iron router package 

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>

因为它更简单

相关文章：