javascript - 当我将新 URL 推送到 Backbone.history 时，查询参数会保留吗？

Question

假设我正在使用 Backbone pushstate，我导航到一个带有查询参数的页面:

domain.com/user/111?hello=123

当我执行此操作时:

Backbone.history.navigate('/settings', true);

我的设置页面加载完美，但 ?hello=123 保留在 URL 中...

domain.com/settings?hello=123

在我浏览网站的任何地方，该查询参数都保留在 URL 中...

Answer 1

主干路由和查询参数是一对不幸的婚姻。问题在 this GitHub issue 中有详细记录.

核心问题是 Backbone.Router 设计用于处理 URL 哈希片段以及 pushState API。当使用散列 URL 时，查询字符串在散列之前，并且在路由中永远不会匹配。使用 pushState，查询字符串是 URL 片段的一部分，并且需要不同的路由表达式。

假设您有一条路线search，并且该路线可以选择采用参数q、sort 和type。作为一个看起来像这样的查询字符串:

search?q=kittens&sort=asc&type=images

问题是，对于旧浏览器的用户，Backbone 将恢复为基于hashchange 的路由，路由将变为:

?q=kittens&sort=asc&type=images#search

您使用的插件试图解决这个问题，但没有解决核心问题。

如果可能，您应该考虑不使用查询字符串，并在路由表达式中使用可选片段传递任何状态信息。之前的示例路线将变为:

//pushState
search/q/kittens/sort/asc/type/images

//hash fragment
#search/q/kittens/sort/asc/type/images

使用 (可选) 路由部分和 :captures ( docs )，您可以用以下表达式表示此 URL:

var Router = Backbone.Router.extend({
  routes: {
    "search(/q/:query)(/sort/:sort)(/type/:type)": "search"
  },

  search: function(query, sort, type) {
    console.log(query, sort, type); //-> "kittens", "asc", "images" 
  }
});

只要路由片段在指定的顺序，这将匹配没有、任何和所有参数的 url，例如:

search                       //->  undefined,  undefined, undefined
search/q/kittens/type/images //->  "kittens",  undefined, "images"
search/sort/asc/type/images  //->  undefined,  "asc",     "images"

这样您就不必担心第三方查询字符串库或浏览器兼容性问题。如果您问我，后一种类型的 URL 看起来也更清晰。