jQuery有一个很棒的插件，可以改变浏览器的URL，叫做jQuery-pusher。

JavaScript pushState和jQuery可以一起使用，比如:

历史。pushState(null, null， $(this).attr('href'));

例子:

$('a').click(function (event) {

  // Prevent default click action
  event.preventDefault();     

  // Detect if pushState is available
  if(history.pushState) {
    history.pushState(null, null, $(this).attr('href'));
  }
  return false;
});

只使用JavaScript history.pushState()，它会更改引用器，在更改状态后创建的XMLHttpRequest对象的HTTP报头中使用它。

例子:

window.history。pushState("object"， "Your New Title"， "/ New -url");

pushState()方法:

pushState()接受三个参数:一个状态对象、一个标题(当前被忽略)和一个URL(可选)。让我们更详细地分析这三个参数:

state object — The state object is a JavaScript object which is associated with the new history entry created by pushState(). Whenever the user navigates to the new state, a popstate event is fired, and the state property of the event contains a copy of the history entry's state object. The state object can be anything that can be serialized. Because Firefox saves state objects to the user's disk so they can be restored after the user restarts her browser, we impose a size limit of 640k characters on the serialized representation of a state object. If you pass a state object whose serialized representation is larger than this to pushState(), the method will throw an exception. If you need more space than this, you're encouraged to use sessionStorage and/or localStorage. title — Firefox currently ignores this parameter, although it may use it in the future. Passing the empty string here should be safe against future changes to the method. Alternatively, you could pass a short title for the state to which you're moving. URL — The new history entry's URL is given by this parameter. Note that the browser won't attempt to load this URL after a call to pushState(), but it might attempt to load the URL later, for instance after the user restarts her browser. The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL. The new URL must be of the same origin as the current URL; otherwise, pushState() will throw an exception. This parameter is optional; if it isn't specified, it's set to the document's current URL.

如果你想让它在不支持历史记录的浏览器中工作。pushState和history。popState，“旧的”方法是设置片段标识符，这不会导致页面重新加载。

基本思想是将window.location.hash属性设置为一个包含所需状态信息的值，然后使用窗口。onhashchange事件，或者对于不支持onhashchange的旧浏览器(IE < 8, Firefox < 3.6)，定期检查哈希是否已经改变(例如使用setInterval)并更新页面。您还需要检查页面加载时的哈希值，以设置初始内容。

如果你使用的是jQuery，有一个hashchange插件可以使用浏览器支持的任何方法。我相信也有其他库的插件。

需要注意的一件事是与页面上的id发生碰撞，因为浏览器将滚动到具有匹配id的任何元素。

我给出了一个更简单的答案，

window.history.pushState(null, null, "/abc")

这将在浏览器URL的域名后面添加/abc。只需复制这段代码并将其粘贴到浏览器控制台，就可以看到URL更改为“https://stackoverflow.com/abc”

我想知道如果它是可能的，只要在页面上的父路径是相同的，只有新的东西被追加到它。

比如，假设用户在http://domain.com/site/page.html页面 然后浏览器允许我进行定位。Append = new.html 页面变成:http://domain.com/site/page.htmlnew.html，浏览器不会更改它。

或者允许用户改变get参数，这里是location。Get = me=1&page=1。

所以原来的页面变成http://domain.com/site/page.html?me=1&page=1，它不刷新。

#的问题是，当哈希被改变时，数据不会被缓存(至少我不这么认为)。这就像每次加载一个新页面时，而非ajax页面中的后退和前进按钮能够缓存数据，而不需要花费时间重新加载数据。

据我所知，雅虎历史记录已经一次性加载了所有数据。它似乎没有执行任何Ajax请求。因此，当使用div处理不同的方法时，不会为每个历史状态存储数据。

我成功地做到了:

location.hash="myValue";

它只是将#myValue添加到当前URL。如果需要在page Load上触发事件，可以使用相同的位置。哈希来检查相关的值。只要记住从location返回的值中删除#即可。散列。

var articleId = window.location.hash.replace("#","");

浏览器安全设置阻止人们直接修改显示的url。你可以想象这会导致什么样的网络钓鱼漏洞。

在不更改页面的情况下更改url的唯一可靠方法是使用内部链接或散列。例如:http://site.com/page.html变成http://site.com/page.html#item1。这种技术经常用于hijax(AJAX +保存历史)。

当这样做的时候，我经常只使用哈希作为href的操作链接，然后用jquery添加点击事件，使用所请求的哈希来确定和委托操作。

我希望这能让你走上正确的道路。