предотвращение добавления к ссылке history.replaceState

Question

Я использую window.history.replaceState и у меня возникают некоторые проблемы, связанные с добавлением URL-адреса.

Он был помечен как дубликат этого вопроса , что я считаю ошибкойнапример, когда я использую этот код, возникает та же проблема, и он продолжает добавлять индекс к URL, как описано ниже.

Пожалуйста, см. мой код ниже:

let index = 1;

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

Проблема, с которой я столкнулсяявляется то, что URL продолжает добавлять число, поэтому он делает что-то вроде следующего:

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 является динамическим, поэтомуЯ не могу жестко закодировать путь.Я просто хочу обновить индекс в конце 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>

И как скрипка для Chrome.

Answer 2

Вы должны сделать это из window.location.origin и начать добавлять путь, поэтому, вероятно, ваш ответ будет

let index = 1;

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