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