Vue router cached component

[piyush-bhatt]

Hello,

I'm facing an issue with dynamic import on a lazy loaded route. It triggers the component fetch the first time but say the fetch failed, it doesn't trigger the fetch anymore the subsequent times.

For e.g., take the following route

{ path: '/about', name: 'about', component: () => import('./About.vue') }

Calling push({ name: 'about' }) triggers a network call to fetch the About component. But say there's a network issue and the component fails to be fetched, calling push({ name: 'about' }) again doesn't trigger the request anymore

I'm assuming it has something to do with the following

The component (and components) option accepts a function that returns a Promise of a component and Vue Router will only fetch it when entering the page for the first time, then use the cached version.

but shouldn't the component only be cached if the fetch was successful? Or maybe there's something that I'm understanding or doing wrong?

Here's a quick screen recording of the same

Screen.Recording.2024-04-17.at.12.07.09.mov