When caching keep-alive, I want to dynamically determine whether a component is cached or not, because the way a component goes in is different, sometimes it needs to be cached and sometimes it doesn't need to be cached.

When caching

keep-alive, I want to dynamically determine whether a component is cached or not, because the way a component goes in is different, sometimes it needs caching and sometimes it doesn"t.

suppose there are three routes: a, B, and C.
requirements:
by default A
B jumps to A Magi An and does not refresh
C jumps to A Magi A Refresh

set the meta attribute in the A route:

        {
                path: "/",
                name: "A",
                component: A,
                meta: {
                    keepAlive: true // 
                }
        }

set beforeRouteLeave:
beforeRouteLeave (to, from, next) {

in component B
         //  meta
        to.meta.keepAlive = true;  //  A 
        next();
    }

set beforeRouteLeave:
beforeRouteLeave (to, from, next) {

in the C component
        //  meta
        to.meta.keepAlive = false; //  A 
        next();
    }

in this case, it will be fine after the first refresh from B to A.
how can I solve this problem when the value printed by my console.log (to.meta.keepAlive) is also true
? Wait online

Mar.16,2021

you can take a look at this. I encountered a similar problem before
link


the to.meta.keepAlive value you printed in component A? If not, you can add

to component A
beforeRouteEnter(to, from, next) {
    console.log(to.meta.keepAlive)
    next();
}

I have no problem with this line of code.

figure 1:App.vue

2:A.vue

3:B.vue

4:C.vue

in router, set A.vue:

{
    path: '/',
    name: 'A',
    component: A,
    meta: {
        keepAlive: true // 
    }
}
You don't have to add the beforeRouteEnter function in

A.vue. I'm just here to see if the value of to.meta.keepAlive is correct

.
Menu