路由器路由没有被链接触发

Question

我有一个主干路由器，其中注册了两条这样的路由

 routes:{
        "":"list",
        "restaurants/:id":"restoDetails"
    },

在应用程序的根目录，当我列出餐馆时，我为列表中的每个成员创建链接

<script id="restaurantListView" type="text/underscore">

<a href="#restaurants/{{= id }}" class="thumbnail plain">

    <h5>{{= name }}</h5>

</a>
</script>

当我点击链接时，它会在 url 栏中创建一个这样的链接

http://localhost:3000/#restaurants/4

但是，没有迹象表明 restoDetails 函数被调用，这与您对路由器中注册的路由的预期相反。例如，这不是记录：

restoDetails:function (id) {
        console.log('resto');

    }

但是，如果我使用像 http://localhost:3000/#restaurants/4 这样的 url 刷新页面，它会更改为相同的内容，但没有哈希

http://localhost:3000/restaurants/4

只有这样restoDetails 函数才会完成它的日志。

注意，在app的init函数中，我也是这样做的

if (window.history && window.history.pushState) {
    Backbone.history.start({pushState: true});

您能否解释一下# 发生了什么，以至于当我单击链接时没有调用restoDetails 函数？

我还应该注意，如果我从这样的链接中删除 #

 <a href="restaurants/{{= id }}"

那么这个问题就不存在了。但是，我得到代码的tutorial 使用了#，所以我认为这是必要的。

@muistooshort 的进一步评论，解决了我上面描述的问题

如果我没有像这样使用 pushstate

       if (window.history ) {
    Backbone.history.start();
}

然后我用#开始我的链接

<a href="#restaurants/{{= id }}" 

当我点击那个链接时，路由器中的方法就会被触发

routes:{
        "":"list",
        "restaurants/:id":"restoDetails"
    },

警报正在被调用

restoDetails:function (id) {
         alert('in resto');

但是，如果我确实使用 pushstate

    if (window.history && window.history.pushState) {
    Backbone.history.start({pushState: true});
}

我设置了没有#的链接

 <a href="restaurants/{{= id }}" 

然后，如果我单击该链接，则不会调用应通过路由触发的函数中的警报。即这个警报现在没有发生。

restoDetails:function (id) {
             alert('in resto');

为什么在启用 pushstate 时单击链接时不会触发此警报？

我还应该注意，如果我使用 pushstate，如果路由器没有触发该功能，它会回退到默认的 Rails 显示操作，因此渲染 json 的结果：@restaurants，root：false出现在 /restaurants/1 页面上

Answer 1

您传递给Backbone 路由器的pushState 选项会激活HTML5 History API 的使用。

这是现代浏览器可用的一个非常有用的功能，它允许 Javascript 应用程序控制 URL 状态。如果您正在为“渐进式增强”或“优雅降级”设计应用程序，这很好。换句话说，如果用户没有可用的 Javascript，服务器可以使用相同的 URL 来呈现页面。我发现这对于需要搜索引擎访问的应用程序至关重要。您可以两全其美：出色的用户体验和 SEO。

如果您只想使用#，请删除pushState 选项：

Backbone.history.start();