when use Vue-router,I want to control dynamicly cache with 'keep-alive' ,but It seems difficult to solve

[dddssw]

What I want to get:

There are two list Page , and you can enter their detail page

if I from list page to detail , then back to list page .The list page should be cache.

but form list page to another list page ,then back. The list page shouldn't be cache.

so , I want to control the list Page cache or not

what I do now

<router-view v-slot="{ Component }"> <keep-alive :include> <component :is="Component" /> </keep-alive> </router-view>

`
const include =ref('')

const route = useRoute()

watch(()=>route.path,(newVal)=>{
if(newVal==='pagelist1'||newVal==='pagelist1detail'){
include.value = 'pagelist1'
}else if(newVal==='pagelist2'||newVal==='pagelist2detail'){
include.value = 'pagelist2'
}else{
include.value = 'nostore'
}
}
)
`
There is more elegrant way to solve it?