记录vue练习遇到的问题：关于document.body.scrollTop

遇到了以下两个问题：

1.a页面跳转b页面后，b页面的document.body.scrollTop距离不是0而是a页面的值。

2.a页面滑动一段距离后跳转b页面，再从b页面返回至a页面时，a页面滚动条位置没有保留原来的位置。

我是先遇到了问题2，在处理问题2的过程中，遇到了问题1。通过在网上查看大家的解决方法，了解到可以用keepAlive内置组件解决问题2，我选择了下面这个方法：

<keep-alive >

<router-view v-if="$route.meta.keepAlive" />

</keep-alive>

<router-view v-if="!$route.meta.keepAlive" />

添加文件：app.vue

{

name: 'home',

path: '/index',

component: Home,

meta: {

keepAlive: true,

fromAddress: ''

}

}

添加文件：router.js

先给app.vue里添加keepAlive，通过判断路由元信息里的keepAlive值，来决定是否缓存信息。

beforeRouteLeave(to, from, next) {

this.offsetTop = document.body.scrollTop   //this.offsetTop 是加在data里存储的

next()

},

beforeRouteEnter(to, from, next) {

if (from.path === '/goodsdetail') { to.meta.fromAddress = 'detail' }

next()

},

// 回到列表 恢复高度

activated() {

console.log(this.$route)

// 恢复滚动高度

if (this.$route.meta.fromAddress === 'detail') { document.body.scrollTop = this.offsetTop }

this.$route.meta.fromAddress === ''

},

添加文件：index.vue  （列表数据的文件上）

然后在a页面添加了beforeRouteEnter、beforeRouteLeave、activated  三个函数。

离开a页面时会触发beforeRouteLeave，这边我把获取到的scrollTop存在data里（个人觉得是因为被keepAlive缓存下来了，所以下次进入页面时可以读取到）

从b页面返回至a页面时，会触发beforeRouteEnter、activated，我这里把改变滚动条位置做了一个判断，仅从b页面过来时才触发，我写在了activeted里。把之前存储的offsetTop给到document.body.scrollTop，这样就可以做到a页面的位置保持不变的效果。

下面记录下问题1的解决方法，原理是每次跳转后把页面的scrollTop变成0.

const router = new VueRouter({

mode: 'hash',

routes

})

router.beforeEach((to, from, next) => {

document.body.scrollTop = 0

document.documentElement.scrollTop = 0

next()

})

添加文件：router.js

不确定这样做是否有什么bug，但目前我还没有发现。