Nuxt.js: [SPA] Redirect to external URL from asyncData replaces current history entry

[rchl]

Version

v2.4.3

Reproduction link

https://codesandbox.io/s/8yl9852pv9

Steps to reproduce

1. Create pages/fail.vue with:

<template>
  <div>
    FAIL
  </div>
</template>

1. Create pages/redirect.vue with:

<script>
export default {
  asyncData({ redirect }) {
    redirect("https://elg.no");
  }
};
</script>

1. Create pages/index.vue with:

<template>
  <nuxt-lint to="/redirect">Navigate to external page</nuxt-link>
</template>

1. Navigate to /fail
2. Navigate to /
3. Click the link
4. Navigate back in history

What is expected ?

Return to the index page where link was clicked from.

What is actually happening?

Navigates to /fail page

Additional comments?

What happens is, when navigating in SPA mode, the code that handles redirect() call is using location.replace to navigate to external URL. The problem is that that happens while URL is still set to / so it replaces that navigation entry with external URL. Navigating back thus goes back to page visited before / which is unexpected.

The solution would be to either allow the URL to change /redirect and then trigger location.replace or use location.assign instead. Former is probably more risky as it would trigger extra routing events and potentially some more code that could possibly fail.

This is only an issue with redirects to external URLs.

_{This bug report is available on Nuxt community (#c8658)}

[rchl]

Non-ideal workaround would be to trigger redirect from a short timeout. Not ideal because the redirect.vue page will render before redirecting and that looks ugly.

And of course there is always an option of not using nuxt-link for those URLs but that is not always possible to control.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as 🕐Pending will not be automatically marked as stale.

[rchl]

reproducible

[IPRIT]

Redirect function now is useless in Nuxt.js, because of this bug. Any updates?

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as 🕐Pending will not be automatically marked as stale.

[rchl]

go away stale bot

[rrdirnens]

Have there been any issues opened for this? Is there a fix?

[TimvdEijnden]

@rchl I know this is an old issue but it seems history it not working at all in this example?

When clicking Go to next page I'm also unable to return to index using browser back button.

[rchl]

@TimvdEijnden You need to export to zip from codesandbox.
Or maybe try again. I've updated everything to latest versions.

[Glutnix]

@rchl Use middleware instead of asyncData:

<template>
  <h1>Redirecting...</h1>
</template>

<script>
export default {
  middleware ({ redirect }) {
    return redirect('https://elg.no');
  },
}
</script>

But yeah, still the same problem :(