A summary,

1.In this paper, open the specified page TAB for the background system on the Web side. After closing the TAB, the page cache in keep-Alive is clear

2. Combine vuex and vueRouter applications

Two, code implementation

1. Close the TAB
tabs.vue
. mapMutations('app'['clearCaches'])
this.clearCaches({clearCachesFlag:true.view:curRoute})
Copy the code
store.js
state: {
    clearCachesFlag:false.curRoute:{}
 },
 mutations: {clearCaches(state,{clearCachesFlag,curRoute}){
      state.clearCachesFlag=clearCachesFlag
      state.curRoute=curRoute
    }
 }
Copy the code
2. Clear the cache key corresponding to keep-alive
app.vue
watch:{
    '$store.state.app.removeCaches'(val){
      if(val){
        this.removeCache(this.curView)
      }
   }
},
// Remove the keep-alive cache
removeCache(view = {}) {
    let vnode = this.getVnode();
    if(! vnode)return false;
    let componentInstance = vnode.parent.componentInstance;
    // This key is used to get the prefix for the following re match
    let keyStart = vnode.key.split('/') [0];
    let thisKey = `${keyStart}${view.fullPath}`;
    let regKey = `${keyStart}${view.path}`;

    this.closeSelectedTag({ componentInstance, thisKey, regKey });
},
getVnode() {
    // Check that the subset is not empty
    if (this.$children.length == 0) return false;
    let vnode;
    for (let item of this.$children) {
    // If there is a key in the data, the subset below keep-alive has been found. This key is the key on the router-view
        if (item.$vnode.data.key) {
                vnode = item.$vnode;
                break; }}return vnode ? vnode : false;
},
closeSelectedTag({ componentInstance, regKey }){
    let reg = new RegExp(` ^${regKey}`);
    Object.keys(componentInstance.cache).forEach((key, i) = > {
        if (regKey===key) {
            // 1 Destroys the instance
            if (componentInstance.cache[key]) {
                componentInstance.cache[key].componentInstance.$destroy();
            }
            // 2 Delete the cache
            delete componentInstance.cache[key];
            // 3 Remove the corresponding key
            componentInstance.keys.splice(i, 1); }});this.clearCaches(false)},... mapMutations('app'['clearCaches'])
Copy the code

conclusion

1. When a dynamic component is wrapped, inactive component instances are cached, so when the page is closed, the cache key is still there

2. Manually clear the specified page cache key to close the page for refreshing