vue 返回上一页并滚动到离开前位置

--- ---

已于 2023-02-09 14:27:14 修改

阅读量807

点赞数

分类专栏： js 文章标签： js javascript vue html5

于 2020-05-31 16:48:23 首次发布

本文链接：https://blog.csdn.net/weixin_43040026/article/details/106457457

版权

标题从页面A跳到B，B返回A时，A保持原本的位置不变

需求：页面比较长，产品经理希望每次返回上一个页面时，都能返回到原本的位置不变，减少用户重复下拉的动作

router整体设置

const router = createRouter({
   
  scrollBehavior: (to, from, savedPosition) => {
   
    if (savedPosition

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

--- ---

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 返回上一页并滚动到离开前位置

需求：页面比较长，产品经理希望每次返回上一个页面时，都能返回到原本的位置不变，减少用户重复下拉的动作。
复制链接

扫一扫

专栏目录

vue返回上一页(后退)的几种方法与区别

vvv3171071的博客

11-30

7万+

案例：从a页面=>b页面=>c页面，当前在c页面，执行某方法后可以如同按了浏览器后退键一样返回b页面方法：若使用vue-router，this.$router.go(-1)可以回到上一页 this.$router.back() window.history.go(-1) 区别 ①与②的区别是： go(-1): 原页面表单中的内容会丢失： 1. this.$router.go(-1)：后退+刷新； 2. this.$router.go(0)：刷新； 3. this.$route

vue3回到上一个路由页面

pscool的博客

04-30

7029

/ 通过 `vm` 访问组件实例。'角色名称不能为空''角色标识不能为空'

参与评论您还未登录，请先登录后发表或查看评论

Vue中实现回退到上一级目录或者回退到首页

最新发布

weixin_52890053的博客

04-10

1003

最近在Vue的路由执行一些功能的实现，自己又很菜，所以学习了该方面的知识并在将其分享给大家，期望可以帮到大家，特别适合小白的学习

【vue】切换路由时，页面滚动位置

weixin_51290060的博客

03-10

204

【vue】切换路由时，页面滚动位置

Vue切换路由，页面回到上一次缓存的滚动位置（代码量少，通用有效）

qq_40896145的博客

04-14

866

本文所提供的方法可适用于大多数vue工程项目，可解决vue-router 所提供方法 scrollBehavior 和 keepAlive缓存滚动位置不生效等问题。

vue3路由跳转后页面显示在上个页面滚动到的位置

Ama_Lee的博客

04-01

3261

问题描述 vue3路由跳转后页面显示在上个页面滚动到的位置原因 vue中的路由跳转是不同组件的显示，尤其是我们在一个公共框架组件下的子组件，很有可能会存在页面显示位置有记忆的问题，vue-router官方文档给出了解决方案，链接如下： https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html 解决方案在创建路由实例的时候添加scrollBehavior（滚动行为）函数，其接受三个参数，to和from路由对象以及savePositio

Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置

10-17

使用 `this.$router.go(-1)` 实现返回上一页。由于设置了 `keepAlive`，缓存的列表页会保持上次离开时的状态，包括滚动位置。 3. **编辑详细页数据**：在离开详细页前，如果数据有变化（例如 `isChange` 为真）...

vue scroller返回页面记住滚动位置的实例代码

08-28

这样，在离开页面时，我们可以记录当前滚动位置，并在下次访问时恢复到之前的滚动位置。本文介绍了 Vue Scroller 返回页面记住滚动位置的实例代码，通过设置 keepAlive 缓存、渲染页面和记录滚动位置三部分来实现...

vue页面跳转后返回原页面初始位置方法

08-28

当我们返回到 listview 页面时，我们可以使用 `watch` 钩子函数来检测路由的变化，并将滚动位置设置为存储的值： ```javascript watch: { '$route' (to, from) { if (to.name === 'NewRecruit') { let ...

vue通过滚动行为实现从列表到详情,返回列表原位置的方法

12-02

场景：项目中，从列表进入详情，再从详情返回列表时，想直接定位到离开时的位置。列表页点击某一个进入到详情页：进入到详情页：从详情页点击返回到列表页到离开的位置：实现方式一：html5 history模式 1在...

Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置

10-16

通过返回一个 Promise，你可以控制滚动动作的时机，比如在数据加载完成后进行滚动： ```javascript scrollBehavior (to, from, savedPosition) { return new Promise((resolve, reject) => { setTimeout(() => { ...

vue滚动行为控制——页面跳转返回上一个页面保留滚动位置

weixin_30278237的博客

03-28

482

需求分析：一般这个功能在后台管理系统用的比较多，因为后台页面都是在当前页面打开，对于某些列表筛选页，如果列表数据比较多，页面就会滚动。当页面发生滚动，对列表数据进行查看或者编辑的时候，跳转到下一级页面，然后点击浏览器返回按钮的时候，我们是希望能保持之前的滚动位置的。缓存？解决这个问题，第一时间想到的是缓存keep-alive，但是缓存只是不执行create/mounted生命周期钩子，页面...

vue 移动端监听页面滚动及跳转后返回原页面位置

偷喝汽水的博客

04-22

2580

百度了很多，但都是电脑端能用，手机端一点反应都没有。比如 window.addEventListener....; document.documentElement.scrollTop....; 等等，试了各种，就是不管用，终于找到了一个有用的。。。正解：！！！！！最外层盒子绑定touchmove // 父盒子 -----最大的盒子 <div @touchmove="handleTouchMove"> </div> js部分： mou..

vue--记住页面的滚动高度，再次返回该页面时自动滚动到当前高度

JiangLittleBai的博客

10-07

2228

1、获取页面滚动高度 document.documentElement.scrollTop 2、什么时候获取页面滚动高度路由变化，离开当前页面时，可以在以下3个方法内获取页面滚动高度并记下来 beforeDestroy destroyed beforeRouteLeave 3、保存页面滚动高度经过第一步和第二步已经可以在离开该页面时获取页面滚动高度了，但是由于在此返回该页面时需要再次滚动到当前高度。因此，需要把整个高度给记下来。。。。。。那么记录到哪里呢？我们知道可以在路由信息部分添

vue 左滑返回上一页

MoMo@blog

07-30

4939

插件：vue-directive-touch 步骤： 1.安装依赖 npm install vue-directive-touch --save; 2.main.is import touch from 'vue-directive-touch'; Vue.use(touch); 3.app.vue &lt;template&gt; &lt;div id="app" v-to

VUE 列表页中实现分页加载（下拉到底部触发下一页）

陈浩然哦的博客

03-29

7254

1、HTML结构注：该方法所执行的基础是10条数据的高度总和应大于列表盒子固定高度 <ul class="my_list" @scroll="scrollEvent"> <li v-for="(item, index) in myList" :key="item.id"></li> </ul> 2.滚动加载分页方法以及所需变量配置 data() { return { isUpdate: true, // 是否到底

若依框架vue3前后端分离版：关闭当前页，返回上一页

m0_56168677的博客

11-16

2845

若依框架vue3前后端分离版：关闭当前页，返回上一页

Vue返回，跳转上一页命令

The limits of your knowledge are the limits of your world

05-08

3212

返回上一页 this.$router.go(-1) 返回上一页，否则跳转指定页面 if (window.history.length <= 1) { this.$router.push({path:'/'}) return false } else { this.$rou...

vue 返回上一页面

09-14

在Vue中返回上一页有多种方式，下面列举了其中几种常见的方法： 1. 使用 `router.go()` 方法：可以通过 `router.go(-1)` 来返回上一页。这个方法会在浏览器的历史记录中回退一步。 ```javascript // 在组件中调用 this.$router.go(-1); ``` 2. 使用 `router.back()` 方法：与 `router.go(-1)` 类似，也是返回上一页。 ```javascript // 在组件中调用 this.$router.back(); ``` 3. 使用 `router.push()` 方法：如果你想要通过路由跳转到上一页，可以使用 `router.push()` 方法，并指定目标页面的路径。 ```javascript // 在组件中调用 this.$router.push('/previous-page'); ``` 这里的 `/previous-page` 是你要返回的上一页的路径。需要注意的是，以上方法都需要确保你已经正确地配置了Vue Router，并且在组件中可以访问到 `$router` 对象。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交