CODEWITHSUNDEEP
javascriptvue.jsnuxt.jshtml5-history
Bernat
Bernat

Reputation: 1288

Discriminate between browser load and browser navigation

Is it possible to check if the browser is loading a page through a page refresh or URL access, or if it is navigating through the browser history (back/forward)?

I'm building an app with Nuxt where I have a setup page (with 3 step URLs) and a preview page (with its own URL):

// setup.vue page
/setup?step=1
/setup?step=2
/setup?step=3

// preview.vue page
/preview

When the setup page is mounted I always redirect the user to the first step (even if it directly navigates to the second or third step through the URL), but I want to prevent this redirection when the user is navigating from the /preview page, using the browser back button.

I have this function:

<script setup>
function goToInitialStep() {
  const router = useRouter();
  if (history.state.forward === router.getRoutes().find(route => route.name === "preview").path) {
    return;
  }
  // Code to navigate to the first step
}

onBeforeMount(() => {
  goToInitialStep();
})
</script>

It works fine in most situations except when the user has landed to the /setup?step=3 page after navigating back from the /preview page, and then, it clicks the refresh button (see the diagram below).

/preview ------> /setup?step=3 ---------> /setup?step=3
         (back)                (refresh)

The desired behavior in this case should be to take the user to the first step, since it is loading the page directly at the third step, but since the history.state.forward value remains the same: /preview page, it prevents the redirection.

How could I avoid this specific case?

Upvotes: 0

Views: 29

Answers (0)

Related Questions