About the error "This page could not be found" in the next() in router.beforeEach()

xachary
0
xachary
commented 4 months ago

Version

v1.0.0

Reproduction link

https://github.com/xachary/test-beforeeach-next

Steps to reproduce

See the README.md about Setup and Run please.

Bug in Nuxt:

  1. open http://localhost:3001/
  2. click "1", that will stay page "index", because run "next('/one')" in router.beforeEach().
  3. click "2", that will go to page "two", because run "next()" in router.beforeEach().
  4. click "back" button of the browser, back to page "index".
  5. click "3", that will redirect "http://localhost:3001/one", then it will show "This page could not be found" error, also run "next('/one')" in router.beforeEach() by the way(wrong).
  6. type "http://localhost:3001/one" in browser, the same as step 4.
    image
    image

Compare without Nuxt:

  1. open http://localhost:7777/
  2. click "1", that will stay page "index", because run "next('/one')" in router.beforeEach().
  3. click "2", that will go to page "two", because run "next()" in router.beforeEach().
  4. click "back" button of the browser, back to page "index".
  5. click "3", that will redirect "http://localhost:7777/one", then stay in page "index"(correct).
  6. type "http://localhost:3001/one" in browser, the same as step 4.
    image

What is expected ?

The step 4 and 5 with Nuxt is same as the step 4 and 5 without Nuxt.

What is actually happening?

It will show "This page could not be found" error in the step 4 and 5 in with Nuxt.

Additional comments?

When error, in client.js:424 (case 18:), the router.currentRoute is always '/', not the target route path.

bug
0

Cancelled

4 months ago by Atinux

Atinux
21.0k
Atinux
commented 4 months ago

Hi @xachary

Thank you for the reproduction repo, it helps a lot.

In nuxt.js, we do some special stuff before mounting the app in SPA mode, so some things differs, also, we don't recommend to use router.beforeEach and using next because of our internal logic with fetch/asyncData.

You can do the same behaviour with the nuxt middleware.

middleware/redirect.js:

export default function ({ route, redirect }) {
  if (route.path === '/one') {
    redirect('/')
  }
}

nuxt.config.js:

// ...
router: {
  middleware: ['redirect']
}
// ...

And voila :)

0
Informations
Bug Report โ€ข Cancelled
#c7477 - Created 4 months ago