vue实现页面缓存
Vue实现页面缓存的常见方法
使用<keep-alive>组件
<keep-alive>是Vue内置组件，用于缓存不活动的组件实例。在路由出口处包裹<keep-alive>可缓存路由组件：
<keep-alive>
<router-view></router-view>
</keep-alive>通过include和exclude属性可指定缓存规则：
<keep-alive :include="['Home', 'About']">
<router-view></router-view>
</keep-alive>配置路由元信息
在路由配置中通过meta字段标记需要缓存的页面：
const routes = [
{
path: '/home',
component: Home,
meta: { keepAlive: true }
}
]动态控制缓存：
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>使用生命周期钩子
被缓存的组件会触发特定生命周期：
activated：组件被激活时调用deactivated：组件被停用时调用
export default {
activated() {
// 恢复滚动位置等操作
},
deactivated() {
// 保存滚动位置等操作
}
}动态缓存策略
结合Vuex或Pinia实现动态缓存控制：
// 在路由守卫中动态设置meta
router.beforeEach((to, from, next) => {
to.meta.keepAlive = store.state.cacheList.includes(to.name)
next()
})注意事项
- 缓存过多组件可能导致内存问题
- 表单数据会被保留，需手动重置
- 滚动位置需自行处理
- 组件名称需与
include/exclude匹配
