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

最新推荐文章于 2024-06-26 09:37:28 发布
最新推荐文章于 2024-06-26 09:37:28 发布
阅读量3.5w 收藏 37
点赞数 1
分类专栏： Vue 文章标签： vue 页面跳转 原页面 初始位置 keepAlive
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013144287/article/details/78985687
版权
vue页面跳转后返回原页面初始位置

        vue页面跳转到新页面之后，再由新页面返回到原页面时候若想返回调出原页面的初始位置，怎么来解决这个问题呢？首先我们应该在跳出页面时候记录下跳出的scrollY，返回原页面的时候在设置返回位置为记录下的scrolly即可，scrolly我用的是vuex状态管理器来保存的。整个环境是基于vue-cli搭建的

一、main.js里面配置vuex
最低0.47元/天 解锁文章
演员赵诗绎
关注
  • 1
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
专栏目录
vue-router如何在返回时返回到上次滚动位置 方法集锦
m0_60707660的博客
04-02 1104
如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。
vue页面跳转后返回原页面初始位置方法
11-28
vue页面跳转到新页面之后，再由新页面返回到原页面时候若想返回调出原页面的初始位置，怎么来解决这个问题呢？首先我们应该在跳出页面时候记录下跳出的scrollY，返回原页面的时候在设置返回位置为记录下的scrolly即可，scrolly我用的是vuex状态管理器来保存的。整个环境是基于vue-cli搭建的 一、main.js里面配置vuex //引用vuex import Vuex from 'vuex' Vue.use(Vuex) 二、main.js里面vuex状态管理 var store = new Vuex.Store({ state: { recruitScrollY:0 }
vue跳转页面的几种常用方法
最新发布
askuld的博客
06-26 760
vue跳转页面的几种常用方法
vue实现返回页面时回到原来的位置
xx_ll_的博客
01-12 2561
使用vue中的导航守卫 beforeRouteEnter 与 beforeRouteLeave beforeRouteEnter(to, from, next) { next(vm => { // 回到原来的位置 const position = JSON.parse(window.sessionStorage.getItem('position')) document.querySelector('.list-row').scrollTop =
vue 详情页返回上一页定位到原位置
weixin_53571730的博客
08-25 588
scroll
vue实现几秒后跳转新页面代码
10-14
在Vue.js框架中，有时我们需要实现一个功能，即在用户完成某个操作后，等待几秒钟再自动跳转到新的页面。这种需求常出现在用户确认操作、加载数据或等待某些处理完成后。本文将详细讲解如何在Vue中实现这个功能，...
Vue项目页面跳转时浏览器窗口上方显示进度条功能
10-15
在Vue项目中，为了提升用户体验，我们经常需要在页面跳转时显示浏览器窗口上方的进度条，以指示页面加载状态。这种功能可以帮助用户感知页面正在加载，减少他们因等待而产生的不耐烦感。实现这一功能，我们可以借助...
vue页面加载闪烁问题的解决方法
08-27
因此，我们需要去“模拟”一个进度条，在后端数据返回前利用一个假的动画效果模拟加载，在数据返回后读完进度条并且隐藏。 例如： ``` // progress-bar.vue export default { data() { return { ...
uni-app返回上一层页面后数据刷新重置解决办法，uni-app页面不刷新，强制刷新页面方法！
热门推荐
海贼王某人的博客
04-16 2万+
最近使用uni-app开发的项目比较多，过程中也遇到了很奇怪的问题，最后在CSDN和百度上面找的答案大都不靠谱，要么实现不了效果，要么就是复杂到看不下去。 页面跳转后返回之前页面数据重置全部刷新了 这个问题很头疼，从a页面去b页面办了点事，回到a页面时之前的数据没了，页面重置了怎么办，网上说设置常量，设置缓存，引入JS文件等等等等，这些确实是办法，但我告诉你一个极其简单的办法。 把路由页面跳转时用......
vue返回上一页面时回到原先滚动的位置的方法
10-17
主要介绍了vue返回上一页面时回到原先滚动的位置的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 页面跳转记录位置返回在原来滚动的位置
至_臻的博客
07-01 2738
第一步：在router文件里面的index.js写入 { path: '/carsList', name: 'CarsList', //汽车列表 component: () => import(/* webpackChunkName: "about" */ '../views/CarsList.vue'), meta: { keepAlive: true //需要缓存 } } 上面是跳转路由，主要是在里面添加meta 第二步：还是在
vue项目列表跳转详情再返回列表还在原位置
erduoduo520的专栏
05-20 697
kee-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。也就是所谓的组件缓存 1.app.vue <template> <div id="app"> <!-- <router-view/> --> <!-- 可以被缓存的视图组件 --> <keep-alive> <router-view v-if="$route.meta.keepAlive"&...
h5在iOS上，回退页面，出现白屏，滑动页面，页面正常展示
swallow_y的博客
12-11 2239
问题：h5在iOS上，回退页面，出现白屏，滑动页面，页面正常展示 scrollRestoration 描述：h5在ios上，第一个页面超过一屏，点击进入第二个页面，第二个页面滑动超过一屏时，返回第一个页面时，第一个屏幕有一块白的盖在上面，滑动页面，白屏消失，页面正常展示。这块白的是第二个页面滚动的部分，盖在第一个屏幕上了。 解决方法：window.history.scrollRestoration会记录上一个页面滚动的位置。 值：auto,将恢复用户已滚动到的页面上的位置; manual,未还原页上的位置。
Tabs 标签页使用子组件展示页面的基本实现
caoyan0829的博客
09-29 803
1：文件位置 2：页面代码 <template> <div class="app-container"> <el-tabs v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="工厂布局" name="first"> <plant-layout /> </el-tab-pane> &.
vue在表格列表页跳转到详情页后返回定位在原来的位置(路由传参的方式实现定位页面)
qq_38181746的博客
10-15 574
跳转时传当前页，返回的时候传回来
vue项目实现从商品列表页跳转详情页后，返回列表页保持页面在原位置，且列表页刷新的方法
大哼的小世界
08-22 4166
vue项目实现从商品列表页跳转详情页后，返回列表页保持页面在原位置，且列表页刷新的方法 页面跳转后回退保持原位置 App.vue页面中使用keep-alive缓存组件 <template> <div id="app"> <keep-alive > <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> &lt
Vue 详情页返回列表页保持原位置
weixin_55257930的博客
09-06 1634
从列表页进入详情页，返回到列表页时，能保持原来的页数或者原来下拉的位置
评论 10
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值