解决Vue页面跳转时滚动条记忆问题

问题：当跳转到二级页面时，滚动条存在记忆，无法显示页面顶部
要求：跳转二级页面时，滚动条自动滚动到顶部，返回上一页面时（滚动条）保持跳转之前的位置

1.在路由入口给组件（需要记忆滚动条的组件）添加缓存 <keep-alive></keep-alive>

<keep-alive include="HomeIndex">
      <router-view></router-view>
</keep-alive>

2.给需要记忆滚动条位置的组件添加组件路由监听和组件缓存的相关声明周期钩子，简而言之就是在路由跳转之前记录当前的滚动条位置，然后在页面返回时，也就是缓存激活的时候再还原滚动条的位置

   beforeRouteLeave(to, from, next) {
    // 记录滚动条位置
    this.scrollTop = document.documentElement?.scrollTop
    next()
  },
  // 组件激活时触发
  activated() {
    // 还原滚动条位置
    window.scrollTo(0, this.scrollTop)
  }

3.给二级页面（不需要记忆滚动条的页面，而且滚动条变化不希望影响来时的页面）添加滚动到顶部的操作

created() {
    // 滚动到页面顶部
    window.scrollTo(0, 0)
}