I encountered a very disgusting problem when using vue single page development project: click a data in the list page to enter the details page, press the back button to return to the list page page refresh, user experience is very bad!! Check out the related problems and use <keep-alive> to solve this problem. Here is my experience.

<keep-alive> is a built-in component of Vue that keeps state in memory during component switching, preventing repeated DOM rendering.

First there is the following code on the app. vue page, which we all know is where the page is rendered

<router-view></router-view>Copy the code

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>Copy the code

We can see that this code makes a logical judgment that the state of the page is saved when the keepAlive value of the meta property of the route is true, but not otherwise.

The next step is to set the keepAlive attribute to our route. For example, I set the keepAlive attribute to True for the route on the home page (list page).

{name: 'index', path: '/index', title: 'home ', Component (resolve) {require(['views/index.vue'], resolve)}, meta: {pageTitle: 'home ', keepAlive: true}}Copy the code

After this setting, the home page state will be saved, and the page will not refresh the request data when the back key returns to the home page.

But there is a problem!! Jumping from the home page to any page and returning to the home page does not refresh the page! This is not what I want, I just need to return from the details page to the list page without refreshing the page, otherwise I need to refresh, then I need to customize. Set the keepAlive value of the home page to false when jumping to other pages, and set the keepAlive value of the home page to True when returning from the details page.

Set the keepAlive value of the home page to false when switching to other pages

export default { data() { return { }; }, mounted() {}, methods: {}, // Change the meta value of the list page. beforeRouteLeave(to, from, next) { from.meta.keepAlive = false; next(); }};Copy the code

Set the keepAlive value of the home page to true when returning from the details page.

export default { data() { return { }; }, mounted() { }, methods: { }, beforeRouteLeave(to, from, next) { if (to.path == "/index") { to.meta.keepAlive = true; } else { to.meta.keepAlive = false; } next(); }};Copy the code

BeforeRouterLeave (to,from,next){} is used here. It is a level of methods, and the specific use method can be checked.

Attention issues:

BeforeRouterLeave works only if it’s written on a page with a configured route. I tried to write it on app. vue but it doesn’t work at all!

The above article to solve the vue single page using keep-alive page return does not refresh the problem is xiaobi share to everyone all the content, I hope to give you a reference, but also hope you support script home.

Articles you may be interested in:

  • Summary and precautions for using keep-alive in VUe2
  • Usage and problem description of keep-alive in vue
  • Vue Keep-Alive Practice Summary (recommended)
  • In-depth understanding of vue-router keep-alive
  • Vue hook functions (route navigational guard, keep-alive, lifecycle hook)
  • Vue uses keep-alive to keep the data cache from flushing
  • Vue project optimization through keep-alive data caching method
  • Precautions when keep-alive is enabled for Vue routes
  • Vue method of keeping a component from being cached by keep-alive
  • Using the Keep-alive component in Vue

The original link: http://blog.csdn.net/leileibrother/article/details/79376502