首页 > 其他分享 >vue项目记录每个页面保持滚动条的位置

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

时间:2024-09-19 16:45:41浏览次数:10  
标签:content vue const 滚动条 meta scrollTop 页面

路由元信息

  • 增加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');
  1. 获取class元素
  const clsssElement = document.querySelector('.xxx');

-

标签:content,vue,const,滚动条,meta,scrollTop,页面
From: https://www.cnblogs.com/tlf01/p/18420927

相关文章

  • 基于django+vue古诗词鉴赏网站【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景在中华文化的浩瀚星空中,古诗词犹如璀璨星辰,穿越时空的长河,照亮了无数文人墨客的心灵世界,也承载着中华民族深厚的文化底蕴与情感寄托。然而......
  • 基于django+vue购药管理系统【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着医疗行业的快速发展和人们对健康意识的不断提升,药品的需求量急剧增加,购药管理成为医疗机构及零售药店运营中不可或缺的一环。传统的手......
  • 基于django+vue购物网【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展和电子商务的日益普及,网络购物已成为人们日常生活中不可或缺的一部分。购物网站作为电子商务的核心平台,不仅极大......
  • VUE 使用用Echart 报错:this.dom.getContext is not a function
    问题:在VUE中 如果使用了 tabs 关在tab 中加入了<div>标签;在初始化中 执行echart.init() 可能会报错:this.dom.getContextisnotafunction;大致如下所示:<el-tabs> <el-tab-pane><div>    <divstyle="height:500px;widows:1000px;"ref="homeLineRe......
  • jsp文件使用vue框架(vue2.0)
    jsp里写vue,是不是很刺激,老样子,这里介绍踩过的坑以及填坑要点,jsp跟传统的html很像,无非就是jsp有给java的头,类似于下面的代码:<%@pagelanguage="java"contentType="text/html;charset=UTF-8"pageEncoding="UTF-8"%>然后开始引入vue以及elementui插件儿,还有axios,我这里都是......
  • 基于django+vue公务用车管理系统【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着政府机构及企事业单位规模的不断扩大,公务用车的管理成为了一个日益复杂且关键的问题。传统的手工管理模式不仅效率低下,还容易出现信息......
  • 基于django+vue公益活动报名系统【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景在当今社会,随着公众对社会责任和公益事业的关注度日益提升,公益活动的参与已成为促进社会和谐、增强社区凝聚力的重要途径。然而,传统的公益......
  • 基于django+vue公司人力管理系统【开题报告+程序+论文】-计算机毕设
    本系统(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。系统程序文件列表开题报告内容研究背景随着企业规模的不断扩大与业务的日益复杂化,人力资源管理成为了现代企业运营中不可或缺的一环。传统的手工管理模式已难以满足高效、精准、......
  • 如何用Python将HTTP接口封装成可视化页面。
        在软件行业中,经常会遇到有一些功能只能通过接口触发,没有页面。这样很不方便,。我们这里,就是通过PyQt5实现,将接口的入参,封装成一个可视化的表单。将用户在表单中填写的数据,传给接口,接口再带参请求业务 1.先看最终的效果,用户打开桌面应用后,只会出现下面的弹窗, 接口......
  • java+vue计算机毕设电影院售票网站【源码+开题+论文+程序】
    本系统(程序+源码)带文档lw万字以上文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展和人们生活节奏的加快,线上购票已成为现代消费者享受娱乐服务的主要方式之一。电影院作为大众休闲娱乐的重要场所,其售票模式......