vue页面从最顶部位置显示 和 返回上层页面还原滚动位置

上网查了使用下面方法 页面最顶部位置显示 确实有效  在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) //回到顶部
    }
}