vue记录当前路由滚动位置

在App结构中，当切换到底部不同的菜单栏时，需要保持原先页面的滚动位置。这样视觉上才不会造成页面刷新，才能提高用户体验。

一、原理
定义一个全局变量，用来记录当前路由的scrollTop滚动值。监听当前路由离开时，把当前scrollTop值赋值给全局变量，在重新进入路由时，设置当前的scrollTo值为scrollTop。

二、嵌套路由
这里使用的是VueCli3，在router.js中创建一个嵌套路由，在index路由中分配home、order、my三个子路由。

{
      path: '/',
      name: 'index',
      component: () => import('./views/index.vue'),
      redirect:'/home',
      children:[
          {
              path: '/home',
              name: '/home',
              component: () => import('./views/home.vue')
          },
          {
              path: '/order',
              name: '/order',
              component: () => import('./views/order.vue')
          },
          {
              path: '/my',
              name: '/my',
              component: () => import('./views/my.vue')
          }
      ]
}

三、全局变量
在main.js中创建一个homeScrollTop全局变量，用来记录home子路由当前的scrollTop滚动值。

//main.js
let homeScrollTop = 0;
Vue.prototype.$homeScroll = homeScrollTop;

四、监听路由状态
这里涉及到created()和activated()这两个生命周期函数的区别以及this.$nextTick()异步执行Dom刷新的知识点，不懂的童鞋自行google。

//home.vue
export default {
  name: 'home',
  //进入路由即触发 created()只触发一次
  activated (){
    //this.$nextTick()异步执行dom刷新
    this.$nextTick(() => {
        console.log(this.$homeScroll);
        window.scrollTo(0, this.$homeScroll);
    })
  },
  //离开路由时
  beforeRouteLeave(to, from, next){
    console.log(to);
    //全局变量homeScroll默认为0 离开页面时 记录当前的页面滚动值
    this.$homeScroll = document.documentElement.scrollTop || document.body.scrollTop;
    //需要执行next函数 否则不起作用
    next();
  }
}

几行代码就实现了，关键是逻辑思维，这里感谢JR童鞋的帮助！