When using vue single-page development project, I encountered a very disgusting problem: click a piece of data on the list page to enter the details page, and press the back button to return to the list page. When the page is refreshed, the user experience is very poor! ! ! I checked related issues and used <keep-alive> to solve this problem. The following is my experience.
<keep-alive> is a built-in component of vue , which can keep the state in memory during component switching to prevent repeated rendering of DOM.
First of all, there is the following piece of code on the App.vue page, we all know that this is where the page is rendered
<router-view></router-view> Change this code to the following:
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view> We can see the logical judgment made by this code, when the value of the keepAlive attribute of the route's meta attribute is true