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
<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
activated() {
console.log(' Yes, I'm in the cache component ')
},
Copy code
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