The Wayback Machine - https://web.archive.org/web/20210331005059/https://github.com/nuxt/nuxt.js/issues/5032
Skip to content

/ nuxt.js

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[SPA] Redirect to external URL from asyncData replaces current history entry #5032

Open
rchl opened this issue Feb 13, 2019 — with CMTY · 10 comments
Open

[SPA] Redirect to external URL from asyncData replaces current history entry #5032

rchl opened this issue Feb 13, 2019 — with CMTY · 10 comments
Labels
bug-report good first issue pending

Comments

@rchl CMTY
Copy link
Contributor

@rchl rchl commented Feb 13, 2019 — with CMTY

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)
@cmty cmty bot added the bug-report label Feb 13, 2019
@rchl
Copy link
Contributor Author

@rchl rchl commented Feb 13, 2019 •
edited

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
Copy link

@stale stale bot commented Mar 6, 2019

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.
@stale stale bot added the stale label Mar 6, 2019
@rchl
Copy link
Contributor Author

@rchl rchl commented Mar 6, 2019

reproducible
@stale stale bot removed the stale label Mar 6, 2019
@manniL manniL added the pending label Mar 7, 2019
@IPRIT
Copy link

@IPRIT IPRIT commented Mar 8, 2019

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

@stale stale bot commented Apr 20, 2019

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.
@stale stale bot added the stale label Apr 20, 2019
@rchl
Copy link
Contributor Author

@rchl rchl commented Apr 25, 2019

go away stale bot
@stale stale bot removed the stale label Apr 25, 2019
@rrdirnens
Copy link

@rrdirnens rrdirnens commented Aug 16, 2019

Have there been any issues opened for this? Is there a fix?
@TimvdEijnden
Copy link
Contributor

@TimvdEijnden TimvdEijnden commented May 18, 2020 •
edited

@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
Copy link
Contributor Author

@rchl rchl commented May 18, 2020 •
edited

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

@Glutnix Glutnix commented Jul 23, 2020 •
edited

@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 :(
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug-report good first issue pending
6 participants
@Glutnix @rchl @manniL @TimvdEijnden @IPRIT @rrdirnens