vue实现返回页面时回到原来的位置
Vue 实现 页面 返回 位置 原来 回到
2023-09-11 14:16:33 时间
使用vue中的导航守卫 beforeRouteEnter 与 beforeRouteLeave
beforeRouteEnter(to, from, next) {
next(vm => {
// 回到原来的位置
const position = JSON.parse(window.sessionStorage.getItem('position'))
document.querySelector('.list-row').scrollTop = position
})
},
beforeRouteLeave(to, from, next) {
// 保存离开页面时的位置
const position = document.querySelector('.list-row').scrollTop
window.sessionStorage.setItem('position', JSON.stringify(position))
next()
}
相关文章
- [转] vue自定义组件(通过Vue.use()来使用)即install的使用
- Laravel + Vue + element-ui 【前端项目一】vue 实现查看更多 5
- Vue + element-ui 【前端项目一】初始化创建项目 1
- 【Vue+element+admin】登陆页面篇(login.vue)
- 【Vue】Vue中通过动态修改Class样式(style)名称实现计算器或充值等功能(图文和完整示例)
- vue基础篇---路由的实现《2》
- vue 自定义指令(directive)实例
- Vue - 实现类似小程序 onShow() 一样的生命周期钩子方法(监听页面的显示,只要页面显示就执行代码)
- vue中实现页面顶部加载进度条
- 详解Vue PC端如何实现扫码登录功能
- 带你深入了解一下vue.js中的this.$nextTick!
- vue动态路由
- Echarts + vue + koa2实现数据同页面,切换全屏内容
- 基于Java+VUE+MySQL 实现聊天系统【100010273】
- 小程序和Vue利用swiper实现icons分页显示--动态计算
- 前端vue如何对接接口,如何传参,传id,实现删除,父子组件传值等等功能?
- 【请收藏】自动化构建部署之Circle CI使用(GitHub/CircleCI/Vue)
- vue router拦截器的简单使用
- Electron-vue实战-每日清单---04登录页面与开机自启动的实现
- 使用Proxy实现vue数据双向绑定
- 浅析Vue数据更新了但页面不更新的7种情况及vue异步更新带来的数据响应的误解
- vue实现数据驱动视图原理
- Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理
- Vue 实例实战之 Vue webpack 仿去哪儿网App页面开发(应用中的几个页面简单实现)
- Django+Vue项目学习第二篇:vue项目创建
- vue 登录页背景-粒子特效(Vue-Particles)