Preface
Recently, Steaming encountered a small pit while working on an independent project. Here is a souvenir to climb the pit.
The basic scenario is that pages are routed through vue, jump from page A to page B (after performing corresponding operations on page B), and then jump from page B to page C. Then return from page C to page B, page B retains its previous state, return to page A, page B is not retained. (｡･∀･)ﾉﾞHi~ I feel that it’s so messy.
In short, forward refresh, backward not refresh (refresh means whether to re-render)
I believe many friends will think of using keep-alive to enable the cache page. Goose, steaming is no exception. The following is the pit climbing process of steaming.
vue route enables keep-alive cache page
keep-alive is a method for caching component instances provided by vue.
The first step is to rewrite the display method of <router-view>
<keep-alive> //This is the page that will be cached <router-view v-if="$"> </router-view></keep-alive> <router-view v-if = "!$"> //This is a component that is not cached</router-view>
The second step is to configure whether the component is cached in the routing configuration file.
routes:[
{ path: '/',
name: 'Index',
component: Index,
meta:{
title:"museum",
keepAlive:false//No cache }
},
{
path:'/searchMain',
name:'SearchMain',
component:SearchMain,
meta:{
title:"search",
keepAlive:true,//cache }
},
{
path:'/collectionDetails',
name:'CollectionDetails',
component:CollectionDetails,
meta:{
title:"Collection Details",
keepAlive:false,//No cache }
}]
In this way, no matter when the cached components will be cached
The third step is to change the state of the cache component according to the routing hook.
beforeRouteLeave(to, from, next) {
if(="front page"){
=false;
}else if(="Details Page"){
= true;
} // When jumping to the home page, it will not cache, and when jumping to the details page, it will not refresh) next();
}
Is this OK?？Is it OK？Is it OK？no！！Because it will succeed the first time，But after quittingggIt's，
becausekeepAlive已经变成It'sfalse,No cache will be the second time。Then add the following code to the first page，When he lets enter
beforeRouteLeave(to, from, next) {
if(=="/searchMain"){
=true;
}
next(true);
return;
},
Practice has proved that the data in the search interface has always been the first time that has been cached.
2. To solve this problem, Steaming remembers two hook functions related to the keep-alive component.
activated: fires when the cached component enters again;
deactivated: will fire when the cached component leaves;
When you first enter the keep-alive component, its life cycle execution order:
beforeRouteEnter ->created ->mounted ...->activated ->deactivated
The order of execution of life cycles is not entered for the first time
beforeRouteEnter ->activated ->deactivated
When entering the second time, the life cycle function of the vue component is not executed, which means that the cache component cannot be destroyed. Not even more unrenewable.
Solution
activated() {
if(!this.$) {
// If isBack is false, it means that new data needs to be obtained, otherwise no longer requests will be made and cached data are used directly (); // ajax method to obtain data }
//Restore to the default false to avoid isBack being true all the time, resulting in the data being unable to be retrieved next time this.$ = false
},
But Su, if you exchange the data again, the data saved in data has not changed before, and it still feels not very thorough!
The ultimate solution
Finally, it's the last step of the answer
It is to dynamically add key values to the routing components to be cached~
<keep-alive> <router-view v-if="$" :key='key'></router-view> </keep-alive> <router-view v-if="!$" :key='key'></router-view>
Conditionally change the value of key in vuex
beforeRouteLeave(to,from,next){
if(=="/"){
this.$("UPDATE_KEY",this.$!==undefined?this.$+
+new Date():this.$route+ +new Date());
}
}
In this way, there will be a very important problem. These cached components are all in memory. If they are constantly operating, the memory accumulation will become larger and larger, resulting in system lag. So destroy it when you leave
Manually trigger destruction
beforeRouteLeave(to,from,next){
if(=="/"){
this.$("UPDATE_KEY",this.$!==undefined?this.$+ +new Date():this.$route+ +new Date());
this.$destroy();//Destroy it}
Conclusion: I've finished writing, I hope it can be used for your reference!
Summarize
The above is the entire content of this article. I hope that the content of this article has certain reference value for your study or work. Thank you for your support.