防止 history.replaceState 附加到 url

Question

我正在使用window.history.replaceState 并遇到一些问题，因为它一直附加到网址。

它已被标记为 this question 的副本，我认为这是一个错误，因为当我使用该代码时，同样的问题正在发生，并且它不断将索引附加到 url，如下所述。

请看我下面的代码：

let index = 1;

function incrementIndexAndUpdateUrl() {
   index++;
   window.history.replaceState('Object', 'Title', `${window.location.href }/${index}`);
}

我遇到的问题是网址不断附加数字，因此它正在执行以下操作：

https://slackoverflowz.com/questions/ask/2/3/4

有谁知道更新 url 的代码应该是什么样子，如下所示：

• https://slackoverflowz.com/questions/ask/2
• https://slackoverflowz.com/questions/ask/3
• https://slackoverflowz.com/questions/ask/4

还值得注意的是 url 是动态的，所以我不能硬编码路径。我只想更新网址末尾的索引。

Answer 1

由于您附加了/something，因此您实际上是在更改路径名。 所以最简单的方法是在更改之前存储原始文件：

let index = 1;
const path = location.pathname;

btn.onclick = incrementIndexAndUpdateUrl;

function incrementIndexAndUpdateUrl() {
   index++;
   window.history.replaceState('Object', 'Title', `${path}/${index}`);
   console.log(location.href);
}

<button id="btn">increment</button>

And as a fiddle for Chrome.

Answer 2

你应该从 window.location.origin 开始并开始附加路径名，所以你的答案可能是

let index = 1;

function incrementIndexAndUpdateUrl() {
   index++;
  window.history.replaceState('Object', 'Title', `${window.location.origin}/question/ask/${index}`);
}