Javascript 链接到路线，但将其渲染到当前路线

在我的场景中，我有一个

items

路由，其中有一个

item

嵌套路由

this.route('items',function(){
    this.route('item',{path:':item_id'});
});

此嵌套路由呈现一个组件，该组件在父路由的内容上方滑动，以便您可以将其滑走。我有另一个名为

监视列表

的路由，它显示与

项目类似的项目

，但显示的项目更多，我想要的行为与

项目

呈现的组件相同，该组件可以从父内容的顶部滑动到它可以被刷走的位置。但是如果我链接到

items.item

它会离开这个路径转到

items

，这样

item

路径就可以进行幻灯片动画了。为了避开这个问题，我添加了一个

项

嵌套路由到

监视列表

，如下所示

this.route('watch-list',function(){
    this.route('item',{path:':item_id'});
});

它的作用与

items

和

items.item

相同，因此现在它呈现与

items.item

相同的组件。我的滑动动画覆盖了父级

监视列表

内容。现在的问题是，我有两条显示单个项目的路线，我真的希望有

项目。无论链接到它的项目列表位于何处，项目
都是我的单个项目路线

是否有一种方法可以链接到
项目。项目
以显示单个项目，并更改URL以反映这一点，但将其呈现在我的
观察列表
路径中，以便单个项目组件滑到
观察列表
内容的顶部，而不是首先呈现
项目

此外，这里是什么样的每个模板或多或少看起来像希望有一些更好的清晰度

// items template
{{#each sortedItems key="id" as |item|}}
    {{#link-to "items.item" item}}
        ...
    {{/link-to}}
{{/each}}
{{outlet}}

// items.item template
{{item-component item=model}}

观察列表是相同的布局，所以我得到相同的效果

// watch-list template
{{#each sortedItems key="id" as |item|}}
    {{#link-to "watch-list.item" item}}
        ...
    {{/link-to}}
{{/each}}
{{outlet}}

// watch-list.item template
{{item-component item=model}}

你真的需要
观察列表
作为路线吗？您的解决方案似乎有点反对将路由作为资源的唯一标识符的想法。如果
监视列表
用于项目的不同可视化，而不是组件，那么使用查询参数会更好，我认为。我同意，但这是老板想要的，不喜欢查询参数，我们需要干净的URL