Why shouldn't we use defineasynccomponent with route component

[ny-fenitra]

The documentation says:

NOTE: Do not use Async components for routes. Async components can still be used inside route components but route component themselves are just dynamic imports.

But don't explain why.

[panstromek]

I have the same question. I suspect this is because of component navigation guards

• Async components probably don't properly trigger them at all
• RouterView will render async component immediately (and change the URL), but for dynamic component, it would first call the navigation guard, which can even can even cancel the navigation.

But I'm just guessing, maybe there's some other reason. It'd be nice to know for sure, because using just dynamic imports has some serious downsides, namely that it introduces noticable delay when you click a link. We would like to use async component to avoid that (or some equivalent of it) and I want to know what are the pitfalls we should be aware of.

[posva]

yeah that's it: the async component resolution happens during render but for the router to handle navigation guards, loader, scroll, etc, we need to have the component data before rendering (which happens after the navigation)