vue回退实现缓存
Vue 实现路由回退缓存的方法
在 Vue 项目中，可以通过以下方式实现路由回退时的页面缓存效果：
使用 keep-alive 组件
<template>
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</template>在路由配置中为需要缓存的页面添加 meta 标记：
{
path: '/detail',
name: 'Detail',
component: Detail,
meta: {
keepAlive: true
}
}动态控制缓存
通过 include/exclude 属性动态控制哪些组件需要缓存：
<keep-alive :include="cachedViews">
<router-view></router-view>
</keep-alive>在 Vuex 或组件中维护 cachedViews 数组：
// 添加缓存
this.$store.commit('ADD_CACHED_VIEW', 'Detail')
// 移除缓存
this.$store.commit('DEL_CACHED_VIEW', 'Detail')使用 scrollBehavior 保存滚动位置
在 router 配置中添加 scrollBehavior 以保存页面滚动位置：
const router = new VueRouter({
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
})组件生命周期钩子
被 keep-alive 缓存的组件会额外触发两个生命周期钩子：
activated() {
// 组件被激活时调用
console.log('组件激活')
},
deactivated() {
// 组件被停用时调用
console.log('组件停用')
}注意事项
- 被缓存的组件会占用内存，需合理控制缓存范围
- 表单数据等敏感信息需要考虑是否应该缓存
- 动态路由参数变化时，相同组件实例会被复用，可通过 watch $route 处理变化
