使用History.pushstate时，如何防止每次单击链接时URL变长？

Question

I'm using pushstate from the HTML 5 History API to change the URL in my single page application.

history.pushState(stateObj, nodeName, 'home/index/' + documentTitle);

I want to prepend the "home/index/" each time when changing the URL so that it looks like this:

mysite.com/home/index/documentTitle1

mysite.com/home/index/documentTitle2

mysite.com/home/index/documentTitle3

mysite.com/home/index/documentTitle4

But what happens is this instead:

mysite.com/home/index/documentTitle1

mysite.com/home/index/home/index/documentTitle2

mysite.com/home/index/home/index/home/index/documentTitle3

mysite.com/home/index/home/index/home/index/home/index/documentTitle4

And so on I think you get the point. How can I prevent that from happening? I thought the URL manipulation from history.pushstate just adds the URL to the current URL

Answer 1

Use absoulte Urls. With history.pushState(stateObj, nodeName, '/home/index/' + documentTitle); you directly overwrite the url from its root (-> '/')

If your program runs on a subdirectory, you have to prefix this. meaning:

var baseUrl = "/app1";
history.pushState(stateObj, nodeName, baseUrl + '/home/index/' + documentTitle);

Answer 2

Try using an absolute URL instead:

history.pushState(stateObj, nodeName, 'http://example.com/home/index/' + documentTitle);

or starting the URL with a / :

history.pushState(stateObj, nodeName, '/home/index/' + documentTitle);

From the docs for pushState :

The new URL does not need to be absolute; if it's relative, it's resolved relative to the current URL