场景:
列表页有个添加按钮:
(1)从列表页
进入详情页
,从详情页
返回列表页
时保存列表页的状态,进入详情页
记住列表页
的滚动位置
(2)从添加按钮进入添加页
① 从添加页面
进入某一项选择的编辑页面
时,保存添加页面
的数据及状态,选择后返回到添加页面
,此时需要更新该项的数据,其余数据保持原有状态
② 从添加页面
返回列表页面
,然后再次点击添加按钮,此时进入添加页面
需要更新整个页面
(一)给页面添加 keep-alive
场景:从添加页面进入某一项选择的编辑页面时,保存添加页面的数据及状态
在App.vue 文件中:
<template>
<div id="app">
<keep-alive>
<!-- 需要缓存的视图组件 -->
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<!-- 不需要缓存的视图组件 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
在 router 路由文件中设置 meta
export default[
{
path:'/',
name:'home',
components:Home,
meta:{
keepAlive:true //需要被缓存的组件
},
},
{
path:'/book',
name:'book',
components:Book,
meta:{
keepAlive:false //不需要被缓存的组件
}
}
]
(二)更新页面数据
场景:使用 keep-alive 缓存页面,返回页面时刷新部分数据
例子:点击邮寄地址-进入地址编辑页面-编辑后把数据传给父页面,并且父页面不刷新,只是地址更新
方法一: keep-alive 包裹住的页面都会被缓存,如果想刷新部分内容要启用activated
函数,用法同created
,activated
只有在被keep-alive
包裹时会触发,activated
函数一进入页面就触发
activated(){
// 赋值、更新数据
}
方法二: 监听路由,然后使用 this.$set() 方法 【这种方式要修改内容多的话做的判断有点多】
watch:{
$route: {
immediate: true,
handler(to, from) {
// 判断from,来自于哪个页面
console.log("from", from);
this.$set(this, 'positionList', 111) //使用 $set 更新视图
},
},
}
(三)清除当前页面的 keep-alive
场景:从列表页面的添加按钮进入添加页面,从添加页面返回列表页面,然后再次点击添加按钮,此时进入添加页面需要更新整个页面。
在有 keep-alive 页面组件中,设置 beforeRouteLeave
例如:如果是从 NewBuild 这个页面进入当前页面,则清除缓存
beforeRouteLeave(to, from, next) {
// 清除缓存
if (to.name === "NewBuild") {
this.$vnode.parent.componentInstance.cache = {};
this.$vnode.parent.componentInstance.keys = [];
}
next();
},
(四)从列表页进入详情页,记住列表页的滚动位置
在列表页面(或着添加页面)中注册事件,步骤如下:
(1)在return中定义一个初始值 scroll
data(){
return{
scroll:"" //页面滚动初始值
}
}
(2)在mouted中 ,mouted中的方法代表dom已经加载完毕
mounted() {
window.addEventListener('scroll', this.handleScroll);
},
(3)methods 用于存放页面函数
// 页面当前滚动状态
handleScroll () {
this.scroll = document.documentElement && document.documentElement.scrollTop
// console.log('当前滚动位置', this.scroll)
}
(4)activated 为keep-alive加载时调用
activated() {
if(this.scroll > 0){
window.scrollTo(0, this.scroll);
this.scroll = 0;
window.addEventListener('scroll', this.handleScroll);
}
},
(5)deactivated 页面退出时关闭事件 防止其他页面出现问题
deactivated(){
window.removeEventListener('scroll', this.handleScroll);
}
五、vue中使用keepAlive缓存页面及记忆上次浏览位置,并刷新页面部分数据
更新部分数据:
参考:https://blog.csdn.net/sinat_41694829/article/details/116018702
使用变量记录第一次进入页面的状态: