vue进入一个新页面时返回本页面滚动条高度保持原来位置

问题

有时候选项很多时并且单个选项文字很多时使用下拉选项的组件就不合适了，这时就需要打开一个页面把选项列出来，用户选完后再返回原来的页面把值回填，但是发现返回时就直接置顶了。

解决

<div id="box" ref="Box" :style="'height:'+ statusBarHeight +'px' " class="aui-content">......</div>

data () {
    return {
      scrollTop: '',  /*保存当前滚动条*/
    }
  },

watch: {
      $route: {
        handler: function (val, oldVal) {
          if (oldVal.path === '/admissionServices/chooseArea') {  /*给滚动条赋值*/
            eventHub.$on('chooseAreaChange', this.chooseArea)
            this.$refs.Box.scrollTop = this.scrollTop
          } else {
            this.scrollTop = this.$refs.Box.scrollTop /*保存当前滚动条位置*/
          }
        },
        // 深度观察监听
        deep: true
      }
    },