Javascript 历史PushState API不支持url中的长片段

目前，我的应用程序运行在Backbone.js上

该应用程序可以很好地处理

片段，但由于URL中的

，谷歌机器人无法对其进行爬网

因此，我决定删除

#

，使其对搜索引擎优化更加友好。我启用了History pushState API并添加了代码以防止默认操作。下面是我初始化路由器实例时的代码片段

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

$(document).on("click", "a", function(e)
        {

            var href = $(e.currentTarget).attr('href');

            var res = Backbone.history.navigate(href,true);
            //if we have an internal route don't call the server
            if(res)
                e.preventDefault();

        });

此外，我修改了Apache配置以启用mod_rewrite，以便处理无状态请求，如刷新页面或在新的浏览器窗口中打开页面。以下是我的Apache配置代码片段：

 <IfModule mod_rewrite.c>
            RewriteEngine on
            RewriteRule ^/([a-zA-Z0-9]+)[/]?$ /index.html?pathtyped=$1 [QSA,L]
 </IfModule>

重新启动发动机
重写规则^/（[a-zA-Z0-9]+）[/]？$/index.html？路径类型=$1[QSA，L]

我面临的问题是，应用程序可以很好地处理短url片段，但不能处理大片段。这意味着以下URL可以工作：

http:server\u name/#view1

->

http:server\u name/view1

http:server\u name/#view2

->

http:server\u name/view2

http:server\u name/#view3

->

http:server\u name/view3

但是带有长片段的url不起作用。（以下情况不起作用）：

http:server\u name/#view1/option1

->

http:server\u name/view1/option1

http:server\u name/#view2/option1/option2

->

http:server\u name/view2/option1/option2

---

任何解决问题的建议都将受到高度赞赏。谢谢你

嗯……也许这有帮助（基于phantomJS）：

我用谷歌搜索了一下，最终发现了。我用一个最小的Backbone.js应用程序测试了它，它似乎支持无限长的无状态进入应用程序：

重新启动发动机
重写cond%{REQUEST_FILENAME}-F
重写cond%{REQUEST_FILENAME}-D
重写cond%{REQUEST_URI}！指数
重写规则。*index.html[L，QSA]

我必须读一点书才能完全理解

RewriteCond

语句，特别是

的内容-f

、

-d

和

！索引

正在执行。除了<代码>之外的一切！索引有意义

试一试，让我知道它是否适合你

编辑：事实上，我发现上面的内容只适用于我在Mac上安装的自制版Apache2，而不适用于Debian。更多的谷歌搜索产生了这种替代形式：

重新启动发动机
重写基/
重写规则^index\.html$-[L]
重写cond%{REQUEST_FILENAME}-F
重写cond%{REQUEST_FILENAME}-D
重写规则/index.html[L]

---

我还提供了一个完整的现代Backbone.js应用程序示例，其中包含pushState和无状态条目。

我猜该应用程序可以在单个URL组件场景中工作，如

http://server_name/viewX

因为您定义的

主干.Router

与URL匹配并成功进行回调定义为渲染

viewX

（对于现代浏览器和web爬虫，不使用

#

，对于较旧的浏览器则使用它）。因此，当它不起作用时，我会想象定义的路由模式与嵌套的URL组件不匹配，并且呈现回调没有被触发

您可以查看一下您的

主干.Router.routes

散列，并确保您的模式在每个深度都与预期的URL组件相匹配。请查看，特别是关于可选和嵌套URL组件的示例，并检查您的匹配模式是否正确。例如，路由哈希包含：

routes: {
    view(/:option1)(/:option2) : renderView
}

应匹配以

视图

（或

#视图

）开头并可选包含一个或两个子参数的URL，如：

• view/1

• view/1/a

• #查看/1

• #查看/1/a

在上述示例中，

option1

将被分配

1

，

option2

将被分配

a

，并将被传递给回调

使用如下路由散列：

routes: {
    view/*option1 : renderView
}

第一个

/

之外的所有内容都将匹配并分配给

选项1

，如：

• view/1/a

• #查看/1/a

---

在上述两种情况下，

option1

将被分配字符串

1/a

，并将传递给回调函数。

我发现上述操作在我的Mac上有效，但在Linux主机上无效，因此我在谷歌上搜索了一些内容，找到了另一种形式。这里有一个完整的例子。编辑我的帖子来展示这一点。