HTML5应用程序路由,pushState

Question

我正在尝试做两件事:

使用pushState更改URL

//Video
$("a").click(function(){
history.pushState(null, "Video", "/video/");
return false;
});

然后能够路由该链接以显示div,如果有人将其键入浏览器:

www.mysite.com/video/ ---> show div

我一直在看几个脚本:davis.js,sammy.js,history.js

我需要这些脚本吗？在jQuery中有没有办法做到这一点？

Answer 1

由于我是Davis.js的作者,我有点偏颇,但我认为使用像Davis.js或Sammy.js这样的路由库是完成这项工作的最简单方法.两个库都有代码来管理单击链接时发生的事情,或者使用后退和前进按钮在状态和历史API的所有其他特性之间进行导航.

如果你想要一些非常简单的东西,那么你可以自己编写代码,尽管这可能比使用lib需要更长的时间.

以下是您可以做的大致概念:

$("a").click(function (e) {
  e.preventDefault()
  var link = $(this)
  history.pushState({pushedByMe: true}, link.attr('title'), link.attr('href'))
  yourCodeHere()
})

history.onpopstate = function (event) {
 if (!event.state.pushedByMe) return
 yourCodeHere()
}