vue3的keep-alive用法和vue2用法是不同的。
vue2 keep-alive
keep-alive概念:
keep-alive是Vue的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁。
keep-alive作用:
用来缓存组件,避免多次加载相同的组件,减少性能消耗,提高用户体验。
keep-alive使用方式:
方式一:在App.vue中使用keep-alive标签,表示缓存所有页面
<div id="app">
<keep-alive>
<tar-bar></tar-bar>
<div class="container">
<left-menu></left-menu>
<Main />
</div>
</keep-alive>
</div>
方式二:按条件缓存,使用include,exclude判断是否缓存
// 1. 将缓存 name 为 cc 的组件,如果有多个,可用逗号分
<keep-alive include='cc,cc1,cc2'>
<router-view/>
</keep-alive>
// 2. 将不缓存 name 为 cc 的组件
<keep-alive exclude='cc'>
<router-view/>
</keep-alive>
// 3. 还可使用属性绑定动态判断
<keep-alive :include='includedComs'>
<router-view/>
</keep-alive>
方式三:在router目录下的index.js中,
第一步:使用meta:{keepAlive = true },表示需要缓存
const routes = [
{
path:'/',
component:Home,
meta:{
keepalive:true
}
},
{
path:'/login',
component:Login
},
{
path:'/edit',
component:Edit,
meta:{
istoken: true
}
},
{
path:'/home',
component:Home,
meta:{
keepalive:true
}
}
]
第二步:在App.vue中进行判断
<div id="app">
<!--keep-alive 表示页面不会被销毁,即保持页面状态-->
<keep-alive>
<router-view v-if="$route.meta.keepalive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepalive"></router-view>
</div>
vue3中 keep-alive
1基本用法(通过插槽)
<router-view v-slot="{ Component }">
<keep-alive>
<component :is="Component"/>
</keep-alive>
</router-view>
2条件缓存(通过插槽的方式)
示例:列表页面跳转到详情页面的情况,保证上一级页面的页面数据不会刷新,例如两个页面A页面—>>>列表页,B页面—>>>详情页,A–>>B–>>A ,缓存A页面的数据
<template>
<router-view v-slot="{ Component }">
<keep-alive :include="includeList">
<component :is="Component"/>
</keep-alive>
</router-view>
</template>
<script>
import { reactive, watch, toRefs } from '@vue/runtime-core'
import { useRoute, useRouter }
export default {
name: 'Test',
setup(){
const state = reactive({
includeList: []
})
const route = useRoute()
// const router = useRouter()
watch(() => route,(newVal,oldVal)=>{
if(newVal.meta.keepAlive && state.includeList.indexOf(newVal.name) === -1){
state.includeList.push(newVal.name);
console.log(state.includeList);
}
},{deep:true}) // 开启深度监听
return{
...toRefs(state)
}
}
}
</script>
路由页面的配置
{
path: 'test',
name: 'Test',
component: () => import('@/views/Test'),
meta: {
keepAlive: true, // 组件需要缓存
}
},