Turbo Router back/forward buttons issue when using pushState

Questions
#1

Hi guys.

We’ve found what seems like an issue with the Turbo Router on a site of ours.

We have a Vue component that uses the Javascript History pushState to update the browser URL with query strings when certain filters are selected. However, when navigating to a Turbo Router link page afterwards and then using the browser back button to return we see the URL update in the browser but the Turbo Router seems to ‘reload’ the current page it’s on, rather than the previous page.

We were wondering if you’ve come across this issue before? In the meantime, I’ve had to just disable the Turbo Router for these specific links in question.

Please let me know if you need any more detail. Thanks!

#2

I can confirm. I started last week with a new project (with offline mall plugin). When testing the filters, I also noticed that the browser navigation does not work properly as soon as the URL has changed.

#3

It sounds like the push state is deleting the Turbo Router’s state. Here is an example of code that is compatible with vanilla JS and turbo router:

if (oc.useTurbo()) {
    oc.visit(tabUrl, { action: 'swap', scroll: false });
}
else {
    window.history.replaceState({}, 'Tab link reference', tabUrl);
}
1 Like
#4

Hi @daft,

thanks. That was helpful. I would suggest adding this to the docs as well.