Clicking a router link results in a `replaceState` *and* a `pushState`

[glen-84]

Version

4.0.8

Reproduction link

https://jsfiddle.net/gob8sL0q/

Steps to reproduce

1. Open the JSFiddle.
2. Click the links.
3. Check the console.

What is expected?

Only pushState should be called (as far as I know).

What is actually happening?

replaceState is called with the current URL, followed by pushState with the new URL.

---

I ran into this while trying to integrate Google Tag Manager and Google Analytics. GTM has a History Change trigger, and it is triggering twice for each navigation because of this issue.

While I could probably filter out the replaceState calls, this should not be necessary if I'm understanding correctly, and just makes GTM more difficult to work with.

[PeterAlfredLee]

Hi @glen-84

The replaceState is called here and the pushState is called here.

I think the replaceState is to store the following data to the current state.

{
  forward: to,
  scroll: computeScrollPosition(),
}

[glen-84]

I see, then I suppose that this is unlikely to change. I'll go with plan B, and filter out the replaceState calls in GTM.

Thanks for your help.

[cedricbloem]

I see, then I suppose that this is unlikely to change. I'll go with plan B, and filter out the replaceState calls in GTM.

Thanks for your help.

@glen-84 Thank you for this situation. We had the exact same issue and were dumbfound for hours. Filtering out the replaceState was indeed a great "solution". Although not the best one, it seems to avoid this vue-router bug

Did you in the meantime came across another way to solve this?

[glen-84]

Did you in the meantime came across another way to solve this?

@cedricbloem I have not. I used Some History Changes (History Source = pushState) in GTM, instead of All History Changes.