如何在 Vue Router 里实现记住浏览器页面的滚动位置
前端达人
共 1077字,需浏览 3分钟
· 2021-11-19
来源 | https://www.cnblogs.com/classlate/archive/2021/11/02/15501987.html
路由出口
<div class="main">
<!-- 包裹`<keep-alive>` -->
<keep-alive>
<router-view></router-view>
</keep-alive>
</div>
页面组件
export default {
data(){
scrollTop: 0, // 储存滚动位置
},
activated() {
// 进入该组件后读取数据变量设置滚动位置
// 注意, 此处由页面是否具有 DTD (如: `<!DOCTYPE html>`), 决定具体选择, 详见参考资料
document.documentElement.scrollTop = this.scrollTop;
// document.body.scrollTop = this.scrollTop;
},
beforeRouteLeave(to, from, next) {
// 离开组件时保存滚动位置
// 注意, 此时需调用路由守卫`beforeRouterLeave`而非生命周期钩子`deactivated`
// 因为, 此时利用`deactivated`获取的 DOM 信息已经是新页面得了
this.scrollTop = document.documentElement.scrollTop;
next();
},
}
学习更多技能
请点击下方公众号
评论
15种时间序列预测方法总结(包含多种方法代码实现)
向AI转型的程序员都关注了这个号👇👇👇在这篇文章中,我们将深入探讨时间序列预测的基本概念和方法。我们将首先介绍单元预测和多元预测的概念,然后详细介绍各种深度学习和传统机器学习方法如何应用于时间序列预测,包括循环神经网络(RNN)、一维卷积神经网络(1D-CNN)、Transformer、自回归模型(
机器学习AI算法工程
0
架构应该如何来理解?
来源:zhuanlan.zhihu.com/p/141027477👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接:htt
小哈学Java
0
SpringBoot 实现图片防盗链功能
程序员的成长之路互联网/程序员/技术/资料共享 关注阅读本文大概需要 4 分钟。来自:blog.csdn.net/weixin_46157208/article/details/138051737前言出于安全考虑,我们需要后端返回的图片只允许在某个网站内展示,不想被爬虫拿到图片地
程序员的成长之路
0
我发现这款浏览器真不错
“软件分享”只分享好玩有趣的黑科技软件很多人都知道我的电脑安装了10款浏览器,每一款浏览器都有自己的分工,国内外的浏览器基本都用过,今天我又发现了一款浏览器。下载用了一下午感觉还很符合国内用户使用,这款浏览器叫CentBrowser(百分浏览器)。可以说是谷歌浏览器增强版吧。Cent Browser
一锅汤软件
2
一站式解决方案:基于 Arthas 实现服务发现和权限控制
来源:juejin.cn/post/7281849496983994383👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接
小哈学Java
0
用 Shader 实现旗帜飘扬动画效果
我觉得对于刚入门 3D 编程的朋友来说,如果能够完成代码创建模型数据->创建材质->编写Shader动画这一系列,想必会有满满的成就感。今天就用 Cocos Creator 的 utils.MeshUtils.createMesh 接口,带大家感受一下这个流程。这个流程不仅可以用于新手学
COCOS
2
Go早期是如何在Google内部发展起来的
2007年Go诞生于Google,2009年Google正式对外宣布了Go语言的开源!时至今日,距离Go开源已经过去了近15个年头了[1]!Go在Google公司内部究竟是怎样的一个状态呢?前Google员工Yves Junqueira近期撰文从其个人所见所闻谈了Go在Google的历程[2]!这里
GoCN
0
OpenUI:输入一段文字就能生成网!页!!
今天给大家介绍一个开源的 AI 网页生成工具:OpenUI!!!前言 在软件开发领域,用户界面(UI)的设计和构建确实是一个至关重要的环节。传统的 UI 开发需要设计师和开发人员紧密合作,通过反复的设计、修改和测试来达到理想的效果,这个过程往往耗时且成本较高。随着 AI 技术的发展,现在有越来越多的
前端技术江湖
0