Issue with MVC vue website on iOS when browser navigation buttons selected, it's not trigger onMounted hooks

[pascal-gm-work]

Hi peeps,

I've search all over for the exact answer to this and I can't seem to find the exact cause. Was hoping someone here may be able to help me.

We have a website that is server side rendered and the vue instance runs on specific pages, but it seems that when people transition between the different vue.js modules using the iOS back or forward buttons, when the page loads it's not firing off any onMounted triggers.

It works when the page is refreshed, or when they use the back and forward browser navigations within the individual vue module, but when they switch, it doesn't seem to be triggering.

for example:

if we have a page at https://example.com/testing
And this has a vue instance with vue-router that stays in the same module while it runs https://example.com/testing/1 or https://example.com/testing/2 etc, back and forward browser navigation work fine.

But if the user navigates to another page https://example.com/new-page
Which has a different vue module with it's own vue router, when they select the back browser button in iOS and go back to https://example.com/testing, it doesn't trigger any onMounted calls, it doesn't fire anything off.

I'm wondering if this is because of iOS and bfcache? and if so, is there any way to stop it from caching.

Links and router-links all work fine, it's just on the safari or chrome browser's back buttons that the issue occurs.

Any help would be greatly appreciated. :)

Thanks :)