Description
Environment
- Operating System: Linux
- Node Version: v16.14.2
- Nuxt Version: 3.4.3
- Nitro Version: 2.3.3
- Package Manager: npm@7.17.0
- Builder: vite
- User Config: -
- Runtime Modules: -
- Build Modules: -
Reproduction
https://stackblitz.com/edit/nuxt-starter-wyu52r
- Click "Open in new tab"
- Open dev tools
- Click "bar" in the top menu
- See Vue warnings in console
Describe the bug
When a page is switched with <nuxt-link>, $route updates too early (before the old page unmounts). This leads to a whole bunch of bugs unless specifically treated.
In this reproduction, it emits Vue warnings when switching from foo to bar:
[Vue Router warn]: No match found for location with path "/bar/1"
[Vue Router warn]: No match found for location with path "/bar/2"
[Vue Router warn]: No match found for location with path "/bar/3"
because foo/index.vue was generating links with $route.path + "/${id}" and somehow it re-renders with the new $route before the page fully switches to bar.
Another example could be page watching $route.params and updating itself, which also crashes unless specifically handled.
This was not happening in Nuxt 2, and makes it difficult to port old apps.
Additional context
In this simple reproduction I could be generating static links with hardcoded prefix such as /foo/${id}, but that doesn't work for reusable components so it's not really an option.
The problem is broader than simply vue-router warnings. The old page should not re-render with the new $route at all!
Logs
No response