APP端页面位置保持的几种方法(Vue篇)

一.记录位置的方式

(1).导航守卫

1.如果不清楚导航守卫概念的，附上官网链接官网传送门

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
    if(from.name == 'home') {
      // from.meta.savedY = window.pageYOffset
      from.meta.savedY = document.documentElement.scrollTop
    }
    next()
  })

简单来说，导航守卫就类似于钩子函数，因此我的设计思路是可以在页面跳转前记录当前页面的滚动位置。如果想只让某些页面有位置保持的功能，可以做if判断from的name或者写到路由独享的守卫里：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        from.meta.savedY = document.documentElement.scrollTop
      }
    }
  ]
})

(2).通过给window添加滚动监听事件，记录当前滚动位置到组件的data里

当然上述方法存在监听频繁的问题，可以用防抖来进行监听的优化。

核心代码块：

 // 防抖处理
      scroll(params) {
        if(this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          this.$emit('currentY', params.scrollTop)
        }, 500)
      }

(3).原理与上类似，监听滚动时可将滚动位置存储到$this.route.meta元信息里（步骤更加简单）。

二.页面跳转到指定位置的方式

(1).如果页面有设置keep-alive缓存，则在actived()里写入跳转函数，如果没有设置缓存，可在mounted()里写入跳转函数。

// 首页位置保持
    activated() {
      // window.scrollTo(0, this.$route.meta.savedY)
      window.scrollTo(0, this.savedCurrentY)
    }

(2).借助vue-router的scrollBehavior(官网传送门)

在路由文件index.js中

const router = new VueRouter({
  routes: [...],
  scrollBehavior = function (to, from, savedPosition) {
        // savedPosition 会在你使用浏览器前进或后退按钮时候生效
       // 这个跟你使用 router.go() 或 router.back() 效果一致
       if (savedPosition) {
            return savedPosition
          } else {
          	//if()此处可做from的判断
            // 如果不是通过上述行为切换组件，就返回你记录的位置
            return {x: 0, y: to.meta.savedY}
        }
    }
})