vue-router的保留滚动距离无效？

问题背景：
在A页面中有一个无线下拉列表，点击某一个列表项，跳转到新的B页面；
在B返回到A的过程中，对A页面进行了keep-alive操作，也就是缓存了页面，A页面的数据都还在，没有产生新的http请求，但是滚动距离回到了顶部，不是之前浏览的位置。

我的做法如下：
1.在app.vue中根据条件保留了页面缓存。

2.在vue-router设置中保留页面滚动高度。尝
老版本的saveScrollPosition和2.0版本的scrollBehavior均无效。

.]

求解思路？
tips：
(在B页面返回到A页面的时候，我在A页面的updated钩子里面写了console.log('updated'));发现执行了updated生命周期。但是A页面的逻辑巨复杂，会是这个updated引起的吗

node.js css javascript vue.js

阅读 5k

4 个回答

Chang1ng

✓ 已被采纳

提供两种解决方案：
1.路由如果使用的是hash方式，手动记录滚动位置，可以是window或者有滚动条的DOM元素。

具体方法如下：  

// vue-router做如下配置
const router = new VueRouter({
    routes: routes,
    mode: 'hash'
});
// 在vue页面处理如下：
    // data初始化的时候默认滚动距离为0
    scroll: 0,
    
    // mounted中绑定滚动事件
    mounted() {
        ElementScroll.addEventListener('scroll', this.handleScroll);
    }
    
    // methods中
    // 内部元素滚动
    handleScrollInner() {
        this.scrollInner = this.fixedElementScrollInner.scrollTop || 0;
    },
    // window滚动
    handleScroll() {
        this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
    }
    
    // 激活keep-alive的时候，执行activated钩子回调
    activated() {
        if (this.isSticky) {
            window.scrollTo(0, this.scroll);
            window.addEventListener('scroll', this.handleScroll);
        } else {
            if (this.$refs.oldPullDown) {
                this.fixedElementScroll.scrollTop = this.scroll;
                this.fixedElementScroll.addEventListener('scroll', this.handleScroll);
            }
        }
        this.scroll = 0;
    },
    // 离开的时候，执行deactivated钩子，删除监听事件
    deactivated() {
        window.removeEventListener('scroll', this.handleScroll);
        if (this.$refs.oldPullDown) {
            this.fixedElementScroll.removeEventListener('scroll', this.handleScroll);
        }
    }

2.通过vue提供的history路由模式实现，这种方式简单，但是需要后端配合，对于已有项目来说，修改起来不方便。

// vue-router升级到最新版本2.7
const router = new VueRouter({
  mode: 'history',
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return desired position
  }
})

// 详情请看官方文档：https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html#%E5%BC%82%E6%AD%A5%E6%BB%9A%E5%8A%A8