vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.68k stars 8.33k forks source link

Nested child routes and using <suspense> #10042

Open 719media opened 10 months ago

719media commented 10 months ago

Vue version

3.4.6, probably all of 3.x

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-jjvegj?file=src%2FApp.vue,src%2Fpages%2Fdemo.vue

Steps to reproduce

https://stackblitz.com/edit/vitejs-vite-jjvegj?file=src%2FApp.vue,src%2Fpages%2Fdemo.vue Click on "link demo nested", note that the child "demo.vue" route renders after a timeout. Then navigate away. Note that the "child" router-view gets unmounted. Ideally, this should not happen.

This stackblitz is forked from discussion here: https://stackoverflow.com/questions/76185240/suspense-in-vue-3-on-nested-routes-why-content-disappears and here: https://github.com/vuejs/router/discussions/1833

For my uses (router-view keeping the previous page until the new component async setup is complete) this would be ideal default behavior.

Suggested workaround from the stackoverflow article, which is done here (just changes to the demo.vue file): https://stackblitz.com/edit/vitejs-vite-e1br9h?file=src%2FApp.vue,src%2Fpages%2Fdemo.vue

Does indeed "work"

What is expected?

The child route does not unmount until the suspense has finished

What is actually happening?

The child route unmounts immediately

System Info

No response

Any additional comments?

No response

719media commented 7 months ago

Anything I can do to test/help get this moving?

edison1105 commented 7 months ago

@719media there may be a chance to fix it in v3.5, probably be in early April.