backbone.js 历史记录PushState API不支持URL中的长片段

hrirmatl  于 2022-11-10  发布在  其他
关注(0)|答案(3)|浏览(162)

目前,我的应用程序运行在Backbone.js上。
该应用程序可以很好地处理#片段,但由于URL中的#,它不能被Google机器人抓取。
因此,我决定删除#,使其更便于SEO。我启用了历史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,以便处理无状态请求,如刷新页面或在新的浏览器窗口中打开页面。

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

我所面临的问题是,应用程序可以很好地处理短的URL片段,但不能处理大的URL片段。这意味着以下URL可以工作:
http:server_name/#view1 -〉http:server_name/view1
http:server_name/#view2 -〉http:server_name/view2
http:server_name/#view3 -〉http:server_name/view3
但带有长片段的URL不起作用。(以下不起作用):
http:server_name/#view1/option1 -〉http:server_name/view1/option1
http:server_name/#view2/option1/option2 -〉http:server_name/view2/option1/option2
任何解决问题的建议都将受到高度赞赏。谢谢!

3htmauhk

3htmauhk1#

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

<ifModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !index
    RewriteRule .* index.html [L,QSA]
</ifModule>

我不得不做一些阅读来完全理解RewriteCond语句,特别是!-f-d!index所做的事情。除了!index之外,所有的东西都是有意义的。
给予看,如果适合你就告诉我。
编辑:我发现上面的方法只适用于我Mac上安装的Homebrew版本的Apache2,而不适用于Debian。

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

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

7uhlpewt

7uhlpewt2#

我 猜 应用 程序 可以 在 http://server_name/viewX 这样 的 单一 URL 组件 场景 中 工作 , 因为 您 定义 的 Backbone.Router 与 URL 匹配 , 并且 成功 地 使 回调 定义 为 呈现 viewX( 现代 浏览 器 和 网络 爬虫 不 使用 # , 旧 版 浏览 器 使用 # ) 。 因此 , 当 它 不 工作 时 ,我 可以 想象 , 定义 的 路由 模式 与 预期 的 嵌套 URL 组件 不 匹配 , 并且 不会 触发 呈现 回调 。
您 可以 查看 一下 Backbone.Router.routes 散 列 , 并 确保 您 的 模式 在 每个 深度 都 与 预期 的 URL 组件 匹配 。 请 查看 有关 路由 的 Backbone.js 文档 , 特别 是 有关 可选 和 嵌套 URL 组件 的 示例 , 并 检查 您 的 匹配 模式 是否 正确 。 例如 , 一 个 路由 散 列 包含 :

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

中 的 每 一 个
应 匹配 以 view ( 或 #view ) 开头 并 可选 地 包含 一 个 或 两 个 子 参数 的 URL , 例如 :

  • view/1
  • view/1/a
  • #view/1
  • #view/1/a

在 上面 的 例子 中 , option1 将 被 分配 1option2 将 被 分配 a , 并 将 被 传递 给 回调 。
使用 如下 的 路由 哈希 :

routes: {
    view/*option1 : renderView
}

格式
除了 第 一 个 / 之外 的 所有 内容 都 将 匹配 并 被 分配 给 option1 , 例如 :

  • view/1/a
  • #view/1/a

在 上面 的 两 种 情况 下 , option1 都 将 被 分配 字符 串 1/a , 并 将 被 传递 给 回调 。

xxb16uws

xxb16uws3#

嗯......也许这是有帮助的(基于phantomJS):http://traviswimer.com/blog/backbone-seo

相关问题