vue本页面路由tab切换如何保持滚动条位置不变

最近做后台管理页面，列表的每条数据点击按钮会打开一个弹窗查看详情，弹窗里面是一个tab切换的形式展现的。用的是本页的路由"/list?tab=0"来切换的。
页面出现一个问题，当我把页面滑到一个距离的时候，点击弹窗然后tab切换，滚动条默认会跳到顶部，然后还要滑到原来的位置切换看下一个内容。
于是我找到一个办法，监听当前路由的变化，滚动后记录位置，切换时设置当前位置。解决如下：

第一步（监听当前的滚动高度）

scroll:""
mounted() {
    window.addEventListener('scroll',this.handleScroll)
 },
destroyed(){
      window.removeEventListener('scroll',this.handleScroll)
},
methods: {
    handleScroll(){
      this.scroll = document.documentElement.scrollTop||document.body.scrollTop
      //console.log(this.scroll)
    }
}

第二步（监听当前的路由）

watch: {
  '$route'(to,from){
      this.$nextTick(() => {
        document.body.scrollTop = this.scroll;
        document.documentElement.scrollTop = this.scroll;
      })
   }
}