Recently, when I was working on a vue mobile project, I was overwhelmed by the caching problem and accumulated some experience. In summary of this record, it should be a review of recent project issues.

First describe the problem scenario: Page A - > Page B - > Page C.Assume that page A is a list page, page B is a list details page, and page C is something that changes page B for similar purposes.When page A enters page B, different details should be displayed according to different list items, from B to C, and different contents should be displayed according to item's identity such as ID. After page C operation, the data of page B will change.There are two situations at this time:

• C page manipulates the data and returns to B page, where the corresponding data should change.
• Page C directly clicks the arrow in the upper left corner to return. Page B should not change the corresponding data.Continue to return to the A list page, change a piece of data, continue to enter B page, B page shows different content, C page refreshes show different content

Another scenario occurs when you add a recipient to a page where you write an email message, then continue adding the recipient after you select one, and the previously added contact should exist.But when you go back to the mailing list from the mailing page and go to the mailing page again, the contact data you added before should not exist. This involves how to handle the cache, when to use the cache, and when to clear the cache.

The overall structure of the project is as follows:

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

Although the official include, exclude allows us to decide which components use caching and which do not use caching, it does not solve the purpose of using caching dynamically. Currently, my project uses the following two methods to process caching:

Way one, use cached identity or not

Add meta information to each route in the route file router.js to identify whether the cache is used.

meta: {
    isUseCache: false,//Do not use caching
    keepAlive: true
}

How to use:
A->B, B cannot be cached; B->A, A cache.

• (1) Page A:

beforeRouteLeave(to, from, next) {
  // Set meta for next route
  if(to.path=='/B'){
    to.meta.isUseCache = false;
  }
  next();
},
activated(){
    if(!this.$route.meta.isUseCache){
        this.getData();
    }
}  

• (2) Page B

beforeRouteLeave(to, from, next) {
  // Set meta for next route
  if(to.path=='/A'){
    to.meta.isUseCache = true;
  }
  next();
},
activated(){
    if(!this.$route.meta.isUseCache){
        this.getData();
    }
}  

Mode 2: Force cache clearance.

This is a way to find from the Internet. After using the internal components of vue, instead of supporting the dynamic destruction of components, the cache always exists and can only be purged from the source.

export const removeCatch = {
  beforeRouteLeave:function(to, from, next){
    if (from && from.meta.rank && to.meta.rank && from.meta.rank>to.meta.rank)
      {//The judgement here is that if you go back to the previous level, you can change the logic of the judgement here based on your business and decide whether or not to destroy the layer's cache as appropriate.
          if (this.$vnode && this.$vnode.data.keepAlive)
          {
              if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache)
              {
                  if (this.$vnode.componentOptions)
                  {
                      var key = this.$vnode.key == null
                                  ? this.$vnode.componentOptions.Ctor.cid   (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : '')
                                  : this.$vnode.key;
                      var cache = this.$vnode.parent.componentInstance.cache;
                      var keys  = this.$vnode.parent.componentInstance.keys;
                      if (cache[key])
                      {
                          if (keys.length) {
                              var index = keys.indexOf(key);
                              if (index > -1) {
                                  keys.splice(index, 1);
                              }
                          }
                          delete cache[key];
                      }
                  }
              }
          }
          this.$destroy();
      }
      next();
  }
};

Introduce this js by mixing pages that need to be cached out. Text Link

epilogue

Caching on the mobile side is really troublesome. If you go forward or backward, when to use the cache, and when not to use the cache, you need to carefully handle it or you will have unexpected problems.However, through this project, I have accumulated some experience.If there is another better solution for the big man, please let me know, thank you!Again, if you have a problem, go ahead and solve it. Don't be afraid of it. If you solve the problem, you will grow!

Promote yourself by the way Blog , synchronize updates!