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();

},

}