1. First, configure the ID of the component to be cached in the route :(keepAlive: true), Tried to set to false, Then, in the routing guard, set the judgment condition to true, But it doesn't work for the first time , The second time it takes effect

export default [
{
path: '/',
component: () =>
import(
/* webpackChunkName: "mainContainer" */ '@/views/mainContainer/index.vue'
),
children: [
{
path: 'list',
meta: {
keepAlive: true,
},
component: () =>
import(
/* webpackChunkName: "resource" */ '@/views/index.vue'
),
},
],
},
]
 Copy code 

2. stay App.vue Add the relevant code in

<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
 Copy code 

3. Use... In cached components activated Life cycle hook function , When components are in keep-alive When the internal is switched activated To be activated , Simply put, it is the case when data needs to be requested , When to use cached data directly

activated() {
console.log(' Yes, I'm in the cache component ')
},
 Copy code 

4. Business scenario , Now there is A,B,C Three pages , stay B Do some operations on the page , For example, search for relevant data by entering search criteria , Then click on a piece of data , Go to the details page C, stay C Click the back button on the page ,B Also keep the state after search , besides A Jump to the B No cache components are required , Always the latest data status , At this point, you can add a type To distinguish between

c Click the back button on the page , Back to B
this.$router.push({path:'b?type=needToKeep'}) /* needToKeep Is the ID that needs to be cached */
A Page to B page ,
this.$router.push({path:'b'})
B On the page ：
activated() {
const { type } = this.$route.query
console.log(' Yes, I'm in the cache component ')
if(type !=='needToKeep'){
this.initdata() // Data needs to be re requested
}else{
// Directly using cached components , If you want to refresh the page at this time , What about re requesting data , arrange ！
const { type } = window.performance.navigation // 1： Refresh the page ,0: Return page
type === 1 ? this.initdata() : ''
}
},
 Copy code 

summary ：keep-alive It is a more convenient function , It's easy to use , But combined with the business scenario , Other people's solutions may not be appropriate , There will be some problems , So finding a solution suitable for your business is the best