Javascript 带有主干的详细信息屏幕上的Boostrap选项卡URL

我的BackboneJS应用程序有一个细节视图，比如一本书，它由url表示，如editorial/Book/edit/4。图书视图由几个基于TwitterBoostrap标记的选项卡组成，例如图书的“常规/特殊/管理”选项卡

如果我按照他们的文档中的规定使用Boostrap选项卡，例如

<li><a data-toggle="tab" href="#special">Special</a></li>

然后，单击选项卡后，地址栏中的URL将变为无效，导航栏将显示siteurl#special，而不是siteurl/edit/book/edit/4#special

问题1：用主干网/Boostrap构建具有有效url的选项卡的最佳方法是什么？我的下一步目标是使此视图可重新加载，例如，当选择一个选项卡并且用户在浏览器中点击“重新加载”时，至少加载相同的视图，理想情况下是选择最新的选项卡

---

问题2：理想的方法是什么？为所有详细信息屏幕构建一个路由器功能及其选项卡，或者将每个选项卡拆分为几个路由器功能？

我的建议是通过JS端处理导航

对问题1的回答

当用户单击选项卡时，在处理程序上使用主干导航功能：

app.navigate("siteurl/editorial/book/edit/4" + '#' + tabId, {trigger: true});

（此examaple具有硬编码的URL路径，只需使用

document.URL

或满足您需要的其他功能获取即可）

对问题2的回答

这将取决于您需要实现的逻辑，以及该逻辑是否繁重。正如在您的问题中所说，每个选项卡都有不同的视图，我建议只在一个路由器函数中拆分逻辑，因为它们都应用于相同的路径（例如siteurl/edit/book/edit/4），并且它们只是在片段URL中有所不同

routes: {
  "siteurl/editorial/book/edit/4#:tabId":         "tab",
}
router.on("siteurl/editorial/book/edit/4#:tabId", function(tabId) {
  //Split your logic based on the tabId
});