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

• 场景

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

• 思路

利用<keep-alive>缓存列表页实例,通过列表页的beforeRouteLeave导航守卫存储参数isRefresh到localStorage,从而在每一次进入列表页组件的active生命周期依据isRefresh进行刷新或滚动条scrollTop设置.

• keep-alive

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

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

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

• beforeRouteLeave

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

 beforeRouteLeave(to, from, next) {}

• demo

app.vue

            <keep-aliv