Backbone.js：单页应用程序、路由和 hrefs 问题答案

【问题标题】：Backbone.js: Single page application, routes and hrefs issueBackbone.js：单页应用程序、路由和 hrefs 问题
【发布时间】：2012-09-22 16:48:50
【问题描述】：

听起来可能有点复杂。

这是 SinglePage，启用 pushState 的应用程序。我有一条路线，用于配置：

    routes: {
        '': 'dashboard',
        'configure/sites/:id': 'configure',
        'configure/sites/:id/:section': 'configureSection'
    },

我正在使用 tbranyen/backbone-boilerplate way 来导航网址。如果我单击仪表板a href="configure/sites/33 中的href，则视图呈现良好。在浏览器 URL 中我可以看到，`localhost:12345/configure/sites/33'。

在配置视图中，我有一个菜单，里面有一些 <a href=。

<ul class="nav configure-nav">
<li>
    <a href="overview" class="overview">Overview</a>
</li>
<li>
    <a href="configuration" class="configuration">Configuration</a>
</li>

问题是，如果我尝试点击这些链接，id 就会消失。

预期的href：http://localhost:12345/configure/sites/33/configuration

实际href：http://localhost:12345/configure/sites/configuration

您能解释一下发生了什么以及如何解决它吗？

【问题讨论】：

标签： backbone.js backbone-routing

【解决方案1】：

我不知道这是否能解决您的问题，但如果您正在制作单页应用程序，您应该在“localhost:12345/”之后放置一个 hashbang，否则所有这些请求都会发送到服务器。

【讨论】：

正如我所说，我使用that 技巧来捕获链接上的所有点击并使用 Backbone.Router - 所以，它不会调用服务器。
我启用了 pushState 路由。
啊，默认情况下会调用 preventDefault，是的。一定是链接试图提取 ID 信息的位置有问题，但不确定是什么原因造成的。

【解决方案2】：

这是由于相对链接和绝对链接的工作方式。在您的情况下，href 是相对于您路径中最近的“目录”的（为了保持文件系统的类比，可以将 :id 部分视为文件）。

如果您在路由中添加尾部斜杠，则概览和配置链接将被正确植根。

【讨论】：