Ember框架中如何阻止子路由跳转到父路由的多余过渡？

首先咱们来拆解问题根源：你导航栏里的嵌套link-to结构是导致重复过渡的核心原因——外层的li是一个指向messages-faxes（对应messages-faxes.index路由）的link-to组件，内层又是一个指向messages-faxes.inbox的link-to。当点击内层链接时，事件会冒泡到外层的li，触发外层link-to的跳转动作，于是就出现了两次过渡：

1. 内层链接触发跳转到messages-faxes.inbox
2. 外层li的link-to触发跳转到messages-faxes.index，接着你在index路由里的redirect又把页面拉回messages-faxes.inbox

这并不是Ember的正常行为，是导航结构设计问题导致的，咱们可以通过两种方式修复：

方案1：移除嵌套link-to，改用普通li #

如果外层li只是用来做样式容器，不需要作为可点击的路由链接，直接把外层的link-to换成普通li即可：

<li>
  {{link-to 'MESSAGES &amp; FAXES' 'messages-faxes.inbox' }}
</li>

这样点击链接时只会触发一次跳转到messages-faxes.inbox，不会触发父路由的跳转，自然也就不会触发redirect导致的重复过渡。

方案2：让外层link-to直接指向子路由 #

如果你需要外层li也能触发跳转（比如要给li添加激活状态类），可以把外层link-to的目标路由改成messages-faxes.inbox，和内层保持一致：

{{#link-to 'messages-faxes.inbox' tagName='li' }}
  {{link-to 'MESSAGES & FAXES' 'messages-faxes.inbox' }}
{{/link-to}}

这样不管点击li还是内层链接，都会直接跳转到messages-faxes.inbox，不会触发父路由的index路由，也就避免了redirect带来的重复过渡。

另外，如果你不再需要messages-faxes.index路由的重定向功能，也可以考虑移除那个redirect方法，但这不是必要操作——只要修复导航的link-to结构，问题就会彻底解决。

内容的提问来源于stack exchange，提问作者Nick Shcherba