Component data caching issues during Vue fallback

There is an order list on the

A page. Click the order in the list to proceed to the order details interface.
in the details page, there is a table that displays the contents of the order, which can be displayed normally when you enter the details interface for the first time.
but if the browser steps back and clicks on another order, then the table in the order details page will contain the contents of the previous order.
initially guesses that this is the reason for the caching strategy, so the method is written in created on page A so that page A will be refreshed every time it create, and it will work properly at this time.
but the downside of this is that it refreshes every time you enter the page. Do you have any good solutions?

Jul.19,2022
The general practice of

details page is to use keep-alive, with activated, deactivated lifecycle function


Talk is cheap, show me the code.


there are two methods: component overload and component non-overload only data overload.
component overloading can be done in the normal life cycle, that is, the page is refreshed, and the keep-alive component does it in the corresponding event.
not only requires components to be re-done in routing.
data is actually reloaded at the routing level, in the component's life cycle, or in events. As for how to achieve it, you have to meet the user experience requirements of a product.

Menu