在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童鞋的帮助！
