vue3 using router4 keepalive problem
The project was upgraded from vue2 to vue3, and the route was upgraded to 4. Then it did not take effect when using keep-alive, so check the document
There is a difference from the configuration of vue3.0, and the configuration information is as follows:
In the process, router-view can be placed in keepalive as follows:
<template> <!-- Configuration --> <keep-alive> <router-view v-if="$" /> </keep-alive> <router-view v-if="!$"/> </template>
<template>
<!-- vue3.0Configuration -->
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component" v-if="$"/>
</keep-alive>
<component :is="Component" v-if="!$"/>
</router-view>
</template>But if this configuration is done, there will be a problem. If the page A is cached and jumping to page B is also cached.
Uncaught (in promise) TypeError: is not a function This error
Therefore, it is necessary to configure the key value in the middle to indicate the uniqueness and correspondence of the component, such as::key="$"
And do not dynamically modify the value to control whether it is cached.
There will be a request to be set to true the first time, because the first time is to create a component, there is no cache, and the request will not be sent after the cache is required. Because if the value is false at the beginning, the rendering component that does not use keep-alive.
Using keepalive pit
Use keepAlive data in vue does not refresh, and only caches the first entry page data.
need
The home page enters the list page, refresh the list page data according to different ids, the list page enters the details page, and the details page will not be refreshed when it returns to the list page.
<keep-alive> <router-view v-if="$"></router-view> </keep-alive> <router-view v-if="!$"> </router-view>
{
path: '/detail/:type/:articleId/:expertId/:status/:synMatchId/:matchType',
name: 'Detail',
component: () => import( /* webpackChunkName: "detail" */ '../views/Detail'),
meta: {
hidden: true,
title: "Details"
}
},
{
path: '/match/detail/:id',
name: 'MatchDetail',
component: () => import( /* webpackChunkName: "matchdetail" */ '../views/Match/'),
meta: {
hidden: true,
title: "Details",
keepAlive: true
}
},This route is the route of the list page. If written in this way, the page will indeed be cached, but every time the page is switched, the data will still be old.
solve
First, configure isrefersh in the route to monitor the page to obtain data from the new one
{
path: '/detail/:type/:articleId/:expertId/:status/:synMatchId/:matchType',
name: 'Detail',
component: () => import( /* webpackChunkName: "detail" */ '../views/Detail'),
meta: {
hidden: true,
title: "Details",
isrefersh:true
}
},
{
path: '/match/detail/:id',
name: 'MatchDetail',
component: () => import( /* webpackChunkName: "matchdetail" */ '../views/Match/'),
meta: {
hidden: true,
title: "Details",
keepAlive: true,
isrefersh:true
}
},front page
When leaving the homepage, determine whether to go to the list page. If you go, set isrefersh to true.
beforeRouteLeave (to, from, next) {
if(=="MatchDetail" || =="MatchDetail2")
{
= true;
}
next();
},List page
When entering the list page, set keppAlive, and then use isrefersh to determine whether to refresh the page.
**Note: **No need to call the interface during the created or mounted life cycle, beforeRouteEnter will trigger every time it enters this page.
beforeRouteEnter(to, from, next){
= true;
next(vm=>{
//The initial value of the page is reassigned here to refresh the page. if(vm.$){
=[]
vm.$=false;
();// Recall the data interface } })
},
beforeRouteLeave(to, from, next) {
= true
next();
},Details
In the details page, determine if you set keepAlive when returning to the list page, you do not need to refresh the data.
beforeRouteLeave (to, from, next) {
if(=="MatchDetail" || =="MatchDetail2"){
= true;
=false;
}
next()
}The above is personal experience. I hope you can give you a reference and I hope you can support me more.