vue路由切换后数据及滚动条保持不变 vue路由切换后数据及滚动条保

场景

Vue移动端单页面应用,首页→列表(刷新)→详情,详情→列表(不刷新)→首页.

思路

【vue路由切换后数据及滚动条保持不变】利用缓存列表页实例,通过列表页的beforeRouteLeave导航守卫存储参数isRefresh到localStorage,从而在每一次进入列表页组件的active生命周期依据isRefresh进行刷新或滚动条scrollTop设置.

keep-alive

可以缓存其包裹的动态组件实例,但它本身只是一个抽象组件,并不会在页面渲染,props如下:

props	desc
include	String或Reg,名称匹配的组件会被缓存
exclude	String或Reg,名称匹配的组件不会被缓存
max	Number,最大缓存的组件数

.当组件在内部切换时,会触发actived和deactived两个生命周期钩子函数,从而方便对组件数据进行进一步存储或赋值.

beforeRouteLeave

路由导航守卫,可配置为全局,路由独享或组件内,在导航离开改组件的对应路由时调用,

beforeRouteLeave(to, from, next) {}

demo

app.vue

myList.vue

export default { name: "myList", activated() { if (Number(localStorage.getItem('isRefresh')) === 1) { this.initPage(); } else { this.$refs.list.scrollTop = this.scrollTop; } }, beforeRouteLeave(to, from, next) { if (to.path !== "/listDetail") { localStorage.setItem('isRefresh', '1'); } else { localStorage.setItem('isRefresh', '0'); this.scrollTop = this.$refs.list.scrollTop; } next(); }, }