Component cached even on a failed network request (vue-router v4.3.2)
piyush-bhatt opened this issue · comments
Reproduction
https://codesandbox.io/p/sandbox/async-cookies-dgnrgh
Steps to reproduce the bug
- Click on
Foo
in the list. It should trigger a network call and navigate to/foo
on success withFoo
displayed on the page - Toggle network offline
- Click on
Bar
. It should trigger a network call but fail to navigate to/bar
as the network call should fail - Toggle network online
- Click on
Bar
again
Expected behavior
Since the initial request to fetch Bar
had failed, the component for route shouldn't be cached and a network request should be triggered again to fetch the component.
The component should only be cached on a successful fetch.
Actual behavior
A network call to fetch component Bar
is not triggered again since the initial request to fetch Bar
had failed and hence the content for the route /bar
can't be displayed anymore without refreshing the whole app
vue-router documentation states 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 it seems that the component is cached even on a failed fetch.
Additional information
No response
Thanks for pointing me in the right direction. After some debugging, it turns out that the issue was with the browser's caching behaviour for dynamic modules
Here is an open issue for anyone who faces the same problem, with cache-busting as a workaround