First, only cache page components according to the route, of course, can be extended to cache page components. (The method is universal, I am a modified method)
The e two methods provided in the official API, include and exclude, can match whether or not to cache components based on regular expressions.
Keep-alive is a built-in component of vue.js. It can keep inactive component instances in memory rather than destroying them directly, and it is an abstract component that is not rendered into the real DOM and does not appear in the parent component chain. It provides include and exclude attributes that allow components to cache conditionally.
Here’s how I did it:
Step 1: in the entry component App, listen for the change of route parameters, define keepAliveComponents array in data to store the component name to be cached, and add it to the array according to whether meta field cache is cached.
Of course, in the meta information of the routing list, define a field whether to cache this component or not (see figure).
Look at the final result ~~
If you look at the result after the page refresh, the cache is gone
It appears that the refresh clears cached components