Vue version

3.3.10

Link to minimal reproduction

https://codesandbox.io/p/devbox/upbeat-ully-64czlg?file=%2Fsrc%2FApp.vue%3A10%2C35

Steps to reproduce

Navigate between ViewA and ViewB.

What is expected?

HTML elements suppose to keep same order (Navigation, RouterView, Footer) after navigating between views.

What is actually happening?

HTML elements being rendered in wrong order (Navigation, Footer, RouterView) after navigating between sync (ViewA) and async (ViewB) views.

System Info

No response

Any additional comments?

Ran into an issue after updating Vue to 3.3.10. Looks like it's related related to latest (3.3.10) release changes (https://github.com/vuejs/core/issues/8105) and is most likely not related to Vue Router itself, but rather to async components.

— Issue persists even if I toggling between components programatically, without RouterView. — Removing timeout property from Suspense gives weird delay but footer stays in place. — Wrapping Suspense in to div makes Footer to stay in correct order.

Most likely related to https://github.com/vuejs/core/pull/9309

/cc @edison1105

@1337huania

Removing timeout property from Suspense gives weird delay but footer stays in place.

This is expected behavior. see https://vuejs.org/guide/built-ins/suspense.html#loading-state