让 Home 页面离开的时候保持原来的状态

2023-11-08

思路

1. 用 keep-alive 让页面不要销毁

<keep-alive include="HomePage">
		<router-view />
</keep-alive>

Tips:

include 不设置的话,所有页面都不销毁,设置 include 是组件 name 为 “HomePage”的不销毁

对应的是 exclude, 写在 exclude 中的会销毁,其他的都不销毁

2.离开的时候保留一个位置信息

   saveScrollY: 0, //记录离开Home 时的状态和位置

  deactivated() { //离开页面的时候调用
    // 页面失活时获取页面Y轴滚动的位置
    this.saveScrollY = this.$refs.scroll.getScrollY();
   
  },

3.进来时,将位置设置为原来保存的位置信息即可
    注意,最好回来时betterscroll 设置下 refresh()

activated() { //页面被激活的时候
    
    if (this.$refs.scroll) {
      // 回到页面瞬间跳转会到离开时候滚动的位置
      this.$refs.scroll.scrollTo(0, this.saveScrollY,0);
      //刷新  scroll 否则有的时候会出现滚动不了的 bug
      this.$refs.scroll.refresh();
    }
  },

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

让 Home 页面离开的时候保持原来的状态 的相关文章