vue列表跳转详情，记录列表滚动不变

记录主元素

  computed: {
    elTable: function() {
      return document.getElementsByClassName('layout-content')[0]
    },
  },
1
2
3
4
5

当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。

当再次进入（前进或者后退）时，只触发activated。

 data() {
    return {
      scrollPosition: 0,
    }
  },
1
2
3
4
5

  activated() {
    this.$nextTick(() => {
      this.elTable.scrollTop = this.scrollPosition
    })
  },
  beforeRouteLeave(to, from, next) {
    this.scrollPosition = this.elTable.scrollTop
    next()
  },
1
2
3
4
5
6
7
8
9