上网查了使用下面方法 页面最顶部位置显示 确实有效 在main.js 全局定义
// 页面跳转 页面的位置从最顶部开始
router.afterEach((to,from, next) => {
window.scrollTo(0,0)
})
接下来我要实现返回上层页面还原滚动位置
在index.js(router.js)
// 添加meta: {keepAlive: true}
{ path: '/orderClinc', name: 'OrderClinc', meta: {keepAlive:true}, component: OrderClinc}
在App.vue
<template>
<div id="app">
<!-- 需要被缓存的组件 -->
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<!-- 不需要被缓存的组件 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div>
</template>
在orderClinc.vue中 beforeRouteLeave 和created是平级关系哦
//在页面离开时记录滚动位置
beforeRouteLeave(to, from, next) {
// 如果要去往的页面是医生详情页 则获取当前滚动的位置
if(to.path == '/doctordetails') {
this.scrollTop = document.documentElement.scrollTop || document.body.scrollTop
console.log(this.scrollTop)
console.log(to)
console.log(from)
} else { // 如果去往的页面不是医生详情页 则不缓存
this.$route.meta.keepAlive = false
}
next()
},
//进入该页面时,用之前保存的滚动位置赋值
beforeRouteEnter(to, from, next) {
next(vm => {
console.log(vm)
document.body.scrollTop = vm.scrollTop
console.log(vm.scrollTop)
})
}
最顶部位置显示 和 还原上层滚动位置 一起使用时 返回还原滚动位置会无效 虽然已经获取到位置 但还是从最顶部位置显示 两者一起使用 代码冲突 最顶部位置显示代码全局定义 会执行此代码
解决办法
如果只需要最顶部位置显示 不考虑还原上层滚动位置 可以再main.js全局定义
如果考虑到还要还原上层滚动位置 则不要再main.js中全局定义 在医生详情页添加如下代码
created() {
// 页面从最顶部位置显示
this.more()
},
methods: {
// 页面从最顶部位置显示
more() {
window.scrollTo(0, 0) //回到顶部
}
}