vue in keep-alive data cached page forward and back and refresh problem

keep-alive Usage:

1, in the definition of the keep-aliv app.vue

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

2, the routing file router.js, define meta information

{ 
  Path: '/ space4' , 
  name: 'space4' , 
  Component: () => Import ( './components/workspace/space4.vue' ), 
  Meta: { 
    isUseCache: to false , // default not cache 
    the keepAlive: to true , 
  } 
}

3, activated hook list page

activated () {
     IF (! the this . route.meta.isUseCache $) { // add meta information when isUseCache the router, interpretation whether to cache 
      the this .contactList = [] // clear the original data 
      the this .contactDisplay () // reloaded 
    } 
  }, 
  Methods: { 
    onClickLeft () { 
      the this . $ router.go (-1 ) 
    }, 
    contactDisplay () { 
      the this .contactListGet the JSON.parse = (sessionStorage.getItem ( 'Contact-Item' )) 
      the let Personal = the this .contactListGet 
      the let I = 0
       for (I in personal) {
        // let surname = personal[i].substring(0,1)
        let surname = personal[i].substring(personal[i].length-2)
        this.contactList.push({'surname': surname, name: personal[i]})
      }
      console.log('contactList', this.contactList)
    }
  }

4, detail page beforeRouteLeave hook function

beforeRouteLeave (to, from, Next) {
     // when the list page to jump to details page, the cache needs to set 
    IF (to.name == 'spaceContact' ) { 
      from.meta.isUseCache = to true 
    } 
    Next () 
  }

 

vue hook function:

Set keepAlive cache components:      

　   第一次进入：beforeRouterEnter ->created->…->activated->…->deactivated        

　　Subsequent to enter: beforeRouterEnter -> activated-> deactivated can be seen, only the first time into the component, created hooks will go, and what to cache component is activated every time to go hook function. So, we have to go inside the hook in this judgment, the current component is required to use cached data or refresh data acquisition.

[See article]