window.history.pushstate keeps pushing the same value-CodePudding

I've got a Vue application. What I want to do is push a value into the URL if the user clicks on an element:

 const updateURL = (id: string) => {
      window.history.pushState({}, '', `email/${id}`);
 };

Actually, the problem is when I click on multiple elements, the URL will be longer and longer, because the 'email/id' will be added to the URL.

So if I click on the first email, the url looks like this: http://localhost:8080/email/0 then if I click on a new item the url will be the following: http://localhost:8080/email/email/12

Is there any way to avoid adding 'email' again and again?

CodePudding user response：

you should pass an absolute route instead of a relative one by adding a / to the start of the route:

 const updateURL = (id: string) => {
      window.history.pushState({}, '', `/email/${id}`);
 };