vue中 beforeRouteLeave 生命周期函数
beforeRouteLeave
需求描述
在使用 element-UI的table 的时候,有这么一个需求。从一个页面切换到另一个页面,再切回来的时候,滚动条的位置不变。
需求:滚动浏览列表页,出现滚动条,点击用户名之后,跳转到商铺管理(发生路由跳转)。从商铺列表返回到信息列表之后,列表页还是之前所浏览的位置,而不是到列表页的顶部。
解决方案:
使用 beforeRouteLeave 来记录路由跳转之前滚动条的位置
使用keepAlive来缓存信息列表状态,路由切换到信息列表的时候回触发 activated。
在 activated 中将beforeRouteLeave 中记录的位置赋值给引起滚动条滚动元素的 scrollTop。
此时需要使用到 beforeRouteLeave 这个生命周期函数。
beforeRouteLeave的用法
** beforeRouteLeave(to, from, next)** : 离开路由之前执行的函数,可用于页面的反向传值,页面跳转。
to :跳转到哪个页面
from:从哪个页面跳转
next:相当于一个按钮开启一样。
具体解决方案
具体解决方案:(el-table 中引起滚动条滚动的元素是 el-table__body-wrapper):
beforeRouteLeave
需求描述
在使用 element-UI的table 的时候,有这么一个需求。从一个页面切换到另一个页面,再切回来的时候,滚动条的位置不变。 需求:滚动浏览列表页,出现滚动条,点击用户名之后,跳转到商铺管理(发生路由跳转)。从商铺列表返回到信息列表之后,列表页还是之前所浏览的位置,而不是到列表页的顶部。 解决方案: 使用 beforeRouteLeave 来记录路由跳转之前滚动条的位置
使用keepAlive来缓存信息列表状态,路由切换到信息列表的时候回触发 activated。
在 activated 中将beforeRouteLeave 中记录的位置赋值给引起滚动条滚动元素的 scrollTop。
此时需要使用到 beforeRouteLeave 这个生命周期函数。
beforeRouteLeave的用法
** beforeRouteLeave(to, from, next)** : 离开路由之前执行的函数,可用于页面的反向传值,页面跳转。 to :跳转到哪个页面
from:从哪个页面跳转
next:相当于一个按钮开启一样。 具体解决方案
具体解决方案:(el-table 中引起滚动条滚动的元素是 el-table__body-wrapper): // 路由跳转之前保存当前滚动条的位置。
beforeRouteLeave(to, from, next) {
this.scroll = document.getElementsByClassName(
"el-table__body-wrapper"
)[0].scrollTop;
next();
},
//使用keepAlive缓存组件状态,页面切换路由会触发 activated 钩子函数。在 activated 中将 之前记录的位置赋值给引起滚动条滚动元素的 scrollTop
activated(){
this.$nextTick(() => {
setTimeout(() => {
// 也可以使用 document.getElementsByClassName("el-table__body-wrapper")[0].scrollTop = this.scroll
this.$refs.table.bodyWrapper.scrollTop = this.scroll;
}, 0);
});
}
vue中 beforeRouteLeave 生命周期函数的更多相关文章
- ionic中的生命周期函数
//ionic中的生命周期函数 onPageLoaded(){ //page初始化时 console.log("page 1 : page loaded"); } //在这里可以做 ...
- vue中的生命周期
vue中的生命周期 1,vue生命周期简介: 1.beforeCreate 在实例初始化之后,数据观测和event/watcher时间配置之前被调用. 2.created 实例已经创建完成之后被调 ...
- Angular 中的生命周期函数
一. Angular中的生命周期函数 官方文档:https://www.angular.cn/guide/lifecycle-hooks 生命周期函数通俗的讲就是组件创建.组件更新.组件销毁的时候会触 ...
- Vue基础之生命周期函数[残缺版]!
Vue基础之生命周期函数[残缺版]! 为什么说是残缺版呢?! 因为有一些周期函数我并没有学到!所以是残缺版! 01 beforeCreate //在实例初始化之后,数据观测 (data observe ...
- vue实例的生命周期函数
Vue的生命周期函数通常分为以下三类: ①实例创建时的生命周期函数:②实例执行时的生命周期的函数:③实例销毁时的生命周期的函数. 代码与注释详解: <!DOCTYPE html> < ...
- Vue 组件以及生命周期函数
组件相当于母版的功能 新建.vue文件,手动完善 <template><div>根节点</div></template> <script>& ...
- Vue 各个阶段生命周期函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue过滤器、生命周期函数和vue-resource
一.过滤器 使用例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- Unity3D中的生命周期函数
生命周期函数:需要继承 MonoBehaviour 类才能使用.生命周期函数全部都是由系统定义好的,系统会自动调用,且调用顺序和我们在代码里面的书写顺序无关. 常用的生命周期函数: Awake():唤 ...
- Vue 中的生命周期和钩子函数
生命周期: beforeCreate:el 和 data 并未初始化 (此方法不常用) created:完成了 data 数据的初始化,el的初始化未完成.用来发送ajax beforeMount:( ...
随机推荐
- OpenMP 入门
OpenMP 入门 简介 OpenMP 一个非常易用的共享内存的并行编程框架,它提供了一些非常简单易用的API,让编程人员从复杂的并发编程当中释放出来,专注于具体功能的实现.openmp 主要是通过编 ...
- Python基础指面向对象:2、动静态方法
面向对象 一.动静态方法 在类中定义的函数有多种特性 1.直接在类中定义函数 再类中直接定义函数,默认绑定给对象,类调用时有几个参数就要传几个参数,对象调用时该函数的第一个参数默认为对象 # 定义 ...
- HTML5和CSS3新特性
1.HTML5新标签和属性 1.1 兼容性前缀与语义化 兼容低版本的写法.比较新的浏览器,可以直接写.兼容性前缀,是每个浏览器私有的. 内核 兼容性前缀 浏览器 Gecko -moz- Firefox ...
- webpack 配置echarts 按需加载
引入babel-plugin-equire插件,方便使用.yarn add babel-plugin-equire -D 在.babelrc文件中的配置 { "presets": ...
- 畅联新增物联网设备接入协议:精华隆的NB一键报警
这个是有点时间了,这里记录一下! ----------------------------------------------------------------------------------- ...
- 我服了!SpringBoot升级后这服务我一个星期都没跑起来!(上)
最近由于各方面的原因在准备升级 Spring Cloud 和 Spring Boot,经过一系列前置的调研和分析,决定把Spring Boot 相关版本从 2.1.6 升级到 2.7.5,Spring ...
- Https Webservice接口的免证书调用
目录 前言 思路 方案 Axis调用 HttpClient调用 参考链接 前言 在调用https协议的Webservice接口时,如果没有做证书验证,一般会报javax.net.ssl.SSLHand ...
- winform窗体全局快捷键
4.使用ShortcutKeys组合键 this.toolStripMenuItem1.ShortcutKeys = ((System.Windows.Forms.Keys)((System.Wind ...
- 进军东南亚市场,腾讯云数据库 TDSQL 助力印尼 BNC 银行数字化转型
腾讯云数据库在助力金融核心系统分布式替换上,已经辐射到了东南亚市场. 东南亚最大的银行之一印尼BNC银行(Bank Neo Commerce)已正式完成新核心分布式迁移,使用腾讯云数据库TDSQL后, ...
- Task01:Matplotlib初相识
一.明晰绘制一张图的组成条件 Figure:最基本的一级 Axes:在Figure上创建子图的容器(如果Figure中仅含一子图,则该容器可省略) Axis:用于处理子图上和坐标轴和网格相关的元素 T ...