Recently, when she was working on an independent project, she encountered a small pit.

The basic scenario is that the page is redirected from page A to page B through the VUE route, and then from page B to page C. After that, page C is returned to page B. Page B remains in its original state, and page A is returned. (. · ∀ ·) Blue ゙ hi ~ Feels funny.

So basically, refresh forward, refresh backward without refresh.

I believe many friends will think of using keep-alive to open the cache page to achieve, goose, cooking is no exception, the following is cooking climb pit process.

The keep-alive cache page is enabled for VUE routes

Keep-alive is an official vUE method for caching component instances.

  • The first step is to change the display mode of <router-view> 

    <keep-alive> // This is the page that will be cached <router-view v-if="$route.meta.keepAlive">
    </router-view></keep-alive>
<router-view v-if = ! ""$route.meta.keepAlive"</router-view>Copy the code
  • Second, in the routing configuration file, configure whether the component is cached 

    routes:[
    {      path: '/',   
           name: 'Index',    
           component: Index,     
           meta:{    
                title:"Museum",     
                keepAlive:false}}, {path:'/searchMain', 
            name:'SearchMain',  
            component:SearchMain,  
            meta:{    
                title:"Search",    
                keepAlive:true,// cache}}, {path:'/collectionDetails',  
           name:'CollectionDetails',  
           component:CollectionDetails,   
           meta:{      
                title:"Collection Details",   
                keepAlive:false,// do not cache}}]Copy the code

So that cached components are always cached at all times

  • Third, change the state of the cache component based on the routing hook

beforeRouteLeave(to, from, next) {  
      if(to.path="Home page"){
          from.meta.keepAlive =false;
      }else if(to.path="Details Page"){
      from.meta.keepAlive = true; } // next(); } Is this ok? All right? All right? No!!!!! Because it did work the first time, but it didn't work when you quit, because keepAlive becamefalseThe second time will not be cached. BeforeRouteLeave (to, from, next) {if(to.path=="/searchMain"){    
       to.meta.keepAlive =true;      
        }    
       next(true);    
   return;  
},Copy the code

Practice has proved that the data in the search interface is always the first cached data.

Second, to solve this problem, Cooking recalls the two hook functions associated with the keep-alive component.

Activated: triggers when a cached component enters again.

Deactivated: triggers when cached components depart.

When the keep-alive component is first entered, its lifecycle is executed in the following order:

beforeRouteEnter ->created ->mounted ... ->activated ->deactivatedCopy the code

When not entered for the first time, its life cycle execution order

beforeRouteEnter ->activated  ->deactivatedCopy the code

The second time the vUE component’s lifecycle functions are not executed, indicating that the cache component cannot be destroyed. You can’t update it.

The solution

 activated() {
   if(! this.$route.meta. IsBack) {// If isBack isfalseThis.getdata (); this.getData(); // Ajax get data method} // revert to defaultfalseAvoid isBack all the timetrue, so that the data this cannot be obtained next time.$route.meta.isBack = false
},Copy the code

However, in exchange for data, the data saved in the data before has not changed, the feeling is still not too thorough!

The ultimate solution

Finally, the last step of the answer

Dynamically add a key to the routing component to be cached

<keep-alive>
          <router-view v-if="$route.meta.keepAlive" :key='key'></router-view>
</keep-alive>
          <router-view v-if=! ""$route.meta.keepAlive" :key='key'></router-view>Copy the code

In VUEX there are conditions to change the value of the key

beforeRouteLeave(to,from,next){
    if(to.path=="/"){
        this.$store.commit("UPDATE_KEY",this.$route.name! ==undefined? this.$route.name+
        +new Date():this.$route+ +new Date()); }}Copy the code

In this case, there is a very important problem, these cached components, are in memory, if the operation continues, memory accumulation becomes larger, resulting in the system to stall. So destroy it on your way out

Manually triggered destruction

beforeRouteLeave(to,from,next){
    if(to.path=="/"){
        this.$store.commit("UPDATE_KEY",this.$route.name! ==undefined? this.$route.name+ +new Date():this.$route+ +new Date());
                 this.$destroy(a); // Destroy it}Copy the code

Conclusion: finished, I hope to provide you with reference oh!