vue keep-alive页面位置

从列表中点击某一按钮,进入详情页面,需要记住列表页当前的位置:

  

   1、需要为 想被记住位置的组件设置缓存,如上图,也可以在app.vue中进行全局设置

   2、在列表页面添加方法:

      mounted () {
          document.addEventListener('scroll',this.handelscroll)
      },

     handelscroll() {
          this.scrollTop = document.body.scrollTop|| document.documentElement.scrollTop || window.pageYOffset
      },

     下面这个是生命周期,(从列表页面到详情页面)

      deactivated (){
        sessionStorage.setItem('scrollTop',this.scrollTop)     把scrollTop值存起来,,也可以通过vuex来存值
      },

    

    activated () {
        document.body.scrollTop =document.documentElement.scrollTop = window.pageYOffset =sessionStorage.getItem('scrollTop')
    },

猜你喜欢

转载自www.cnblogs.com/rrene/p/9196004.html