问题:
从首页切换到我的,再从我的回到首页,我们发现首页重新渲染原来的状态没有了。首先,这是正常的状态,并非问题,路由在切换的时候会销毁切出去的页面组件,然后渲染匹配到的页面组件。但是我想要某些页面保持状态,而不会随着路由切换导致重新渲染。
解决方法:
使用 keep-alive 缓存组件
官方文档:在动态组件上使用 keep-alive
生命周期:
钩子函数 | 执行时机 |
beforeCreate | 初始渲染执行,缓存后不再执行,除非重新渲染 |
created | 初始渲染执行,缓存后不再执行,除非重新渲染 |
beforeMount | 初始渲染执行,缓存后不再执行,除非重新渲染 |
mounted | 初始渲染执行,缓存后不再执行,除非重新渲染 |
beforeUpdate | 更新前执行,不受缓存影响 |
updated | 更新后执行,不受缓存影响 |
activated | 被 keep-alive 缓存的组件激活时调用(包括首次渲染激活),没有缓存不会调用 |
deactivated | 被 keep-alive 缓存的组件停用时调用,没有缓存不会调用 |
beforeDestroy | 组件销毁前执行,缓存后不再执行,除非清除缓存(相当于销毁组件) |
destroyed | 组件销毁后执行,缓存后不再执行,除非清除缓存(相当于销毁组件) |
使用keep-alive标签包裹根路由
include
和 exclude
属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。
<template>
<div id="app">
<!--
一级路由出口
缓存一级路由组件
-->
<keep-alive :include="['layoutIndex']">
<router-view />
</keep-alive>
</div>
</template>
解决组件缓存后滚动条问题:
在当前滚动条的组件里写在mounted里,在data声明数据scrollTop。
//注:debounce是防抖处理
mounted(){
//获取滚动位置
const articleList = this.$refs['article-list']
articleList.onscroll = debounce(()=>{
this.scrollTop = articleList.scrollTop
},50)
}
然后在deactivated生命周期中回归滚动位置
activated(){
//组件被激活
this.$refs['article-list'].scrollTop = this.scrollTop
},
解决组件缓存用户数据不更新问题:
控制:include="['layoutIndex']这个数组来实现
首先在vux的state中定义
state: {//存放数据
cachePage:['layoutIndex'] //缓存控制的数据
},
在mutations中定义
mutations: {//state成员操作作
//添加缓存页面
addCachPage(state,pageName){
if(!state.cachePage.includes(pageName)){
state.cachePage.push(pageName)
}
},
//移除缓存页面
removCachePage(state,pageName){
const index = state.cachePage.indexOf(pageName)
if(index !== -1){
state.cachePage.splice(index,1)
}
}
}
在登录成功后清除
this.$store.commit('removCachePage','layoutIndex')
在layoutIndex组件中继续让它缓存
mounted(){
this.$store.commit('addCachPage','layoutIndex')
}
个人学习记录