Is it possible to prevent the loading indicator from appearing when the back button is pressed in the mobile Safari browser?

[reipark]

Hello.

first of all, I'm not good at English, so I used a translator, so please understand that the sentences may be a little awkward...

I am using Vue 3 + Vue Router.

I've coded the following to prevent navigating back from the page where a certain service ends.

javascript
Copy code
router.beforeEach((to, from, next) => {

if (notAllowPaths.includes(to.path)) {
next(false);
return;
}

// Other logic...

next();
});
For example, when a user progresses from step01 to step05, moves to the step05 router, and views a page called step05.vue, my intention is to prevent them from going back to the step04 router when they press the back button.

The above code works normally, but...

On the mobile Safari screen, as of iOS 17.2, a blue loading bar is displayed at the bottom of the browser with slight progress. In the case of mobile Chrome, there is no problem, as if you were using a resolver.

As a precaution, I set endFlag as a global variable and set the value to true when you go to step05.

javascript
Copy code
// In router.beforeEach, clear the above condition and take no action
router.beforeResolve(async to => {
const { endFlag } = storeToRefs(commonStore); // I am using Pinia.
if (endFlag.value) {
return false;
}
});
I tried it like this, but it doesn't move the router as intended, and a loading bar is displayed in mobile Safari.

How can I prevent the loading bar itself from appearing? (Or make it appear as if the loading bar has been handled.)

[posva]

The browser doesn't allow you to change that. It will also not let you "trap" a user on a page. They will always be able to force a go back if they click multiple times the back button, this is a browser behaviour they don't intend to change.

[reipark]

Thanks for your reply. I feel the same way, but it was a general question about how to avoid it "gracefully" in my situation. This is because it seemed possible by making good use of tools such as beforeEach, afterEach, and beforeResolve in vue-router.

[posva]

You can use those tools and retur false / next(false) to prevent the navigation but be aware it won't always work.
Unrelated but you need to remove the storeToRefs() from the guard. Use the store directly inside:

router.beforeResolve(to => {
  const store = useStore()
  // use it
})