Keep-alive sets caching or no caching in routing hooks. If there are three routes A, B, C, B jump to AMagi A without refreshing C to AMagi A refresh.
in Vue, keep-alive sets caching or no caching in routing hooks. For example, if there are three routes A, B, C, B, if there are three routes A, B, C, B does not refresh, C does not refresh, and A
the code I am looking for on the Internet has no effect the first time, but it will be normal after that. I do not know what causes
router
.
App.vue
C C A A
BA A
beforeRouteLeave(to, from, next) {
to.meta.keepAlive = true; // A
next();
}
Why is it normal after it doesn"t work the first time? How to settle the request?
I have the same problem. Have you solved it?
(personal guess 1: because there are two router-view, the following one is not cached the first time, but there is no cache inside the cache, only after loading the cached page once)
(personal guess 2 is because the time to set keep-alive is too late. When the navigation already knows to go to the B page, it is too late to set whether to cache B at this time, and it will only take effect next time. )
the method you are talking about is not very good. Officials don't have that kind of use. No, no, no. The solution is as follows:
Amura-> B, B does not exist, while Cmure-> B, B
the idea is based on the page relationship of AMUE-> B--> C
.
the specific idea is: (this idea should verify conjecture 2)
1, use vuex to store the name of page B that needs to be cached.
< keep-alive: include= "$store.state.keepAlives" >
<router-view></router-view>
< / keep-alive >
2, combined with the navigation guard
from A muri-> B, set the vuex cache so that the B page is cached when it goes to other pages. Load cached data from other pages to B (C is other pages).
set vuex not to cache (delete the name of B page) when < BMY-> A, so that leaving B page to Amai B is not cached, and you are not cached from AME-> B. Meet the requirements (when you leave B, set whether to cache the next time you come in. This avoids conjecture 2)
the navigation guard of the
A page
beforeRouteLeave (to, from, next) {
//
if(to.name=='B'){
this.$store.commit('setkeepAlives',['B'])
}
next();
},
The navigation guard of
B page
beforeRouteLeave (to, from, next) {
//
if(to.name=='A'){
this.$store.commit('setkeepAlives',[])
}
next();
},
I've had a similar problem before
take a look at
link
