vue项目记录每个页面保持滚动条的位置

路由元信息

• 增加keepAlive:true ， scrollTop: {top: 0} ，

{
        path: '/**/**',
        name: '**',
        component: () => import('@/views/**/index.vue'),
        meta: {
          title: '**',
          affix: false,
          keepAlive: true,  
          scrollTop: {  // 记录一些使用信息
            top: 0,  // 滚动条的位置
          },
        },
      },
}

离开时记录页面中表格滚动条的位置

router.beforeEach(async (to, from, next) => {
  // 离开页面时，记录滚动条位置
  // 获取滚动元素id
  const $content = document.getElementById('app')
  if ($content) {
    // 获取高度
    const _curScrollTop = $content.scrollTop
    // 存入meta
    from.meta.scrollTop = _curScrollTop
  }

页面激活时,给页面赋值，滚动高度

// 进入页面时，滚动到指定位置
// 获取滚动元素
const $content = document.getElementById('app')
// 设置滚动条
$content.scrollTop = this.$route.meta.scrollTop

知识点

1. 获取id元素

  const clsssElement = document.getElementById('.xxx');

2. 获取class元素

  const clsssElement = document.querySelector('.xxx');

-