vue H5列表页面跳转详情返回列表页保持在当前位置

最新推荐文章于 2024-04-02 04:39:41 发布

3天饿九顿

最新推荐文章于 2024-04-02 04:39:41 发布

阅读量1.4k

点赞数 3

分类专栏： H5 vue案例文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_46210850/article/details/128241295

版权

vue案例同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

6 篇文章 2 订阅

订阅专栏

需求：列表点击跳转到详情页，详情页面返回到列表页，同时停留在刚才点击的位置
实现方式 Keep-alive

路由添加标识

{
    path: "/WhiteList",
    name: "WhiteList",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/system/WhiteList.vue"),
      meta:{
        keepAlive: true 
      }
  },

App.vue 判断标识

	<keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />

跳转时详情缓存滚动了的高度

jumpDetails(item) {
      let listScrollTop = document.querySelector(".content").scrollTop;
      sessionStorage.setItem("scrollTop", listScrollTop);
      this.$router.push("/details");
    },

activated生命周期设置滚动值

activated() {
    document.querySelector(".content").scrollTop =
      sessionStorage.getItem("scrollTop") || 0;
  },

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

3天饿九顿

关注关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue H5列表页面跳转详情返回列表页保持在当前位置

需求：列表点击跳转到详情页，详情页面返回到列表页，同时停留在刚才点击的位置。实现方式 Keep-alive。
复制链接

扫一扫

专栏目录

详情页返回列表页时保持原来的位置

gxf_ming的博客

06-14

8509

3种方法去实现, 1.设置锚点锚点1 锚点锚点5 1111111 --> --> 2.缓存历史数据,包括cookies,sessionstorage sessionStorage.setItem("ke

Vue 详情页返回列表页保持原位置

weixin_55257930的博客

09-06

1596

从列表页进入详情页，返回到列表页时，能保持原来的页数或者原来下拉的位置

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

vue 详情页返回上一页定位到原位置

weixin_53571730的博客

08-25

520

scroll

vue-router如何在返回时返回到上次滚动位置方法集锦

最新发布

m0_60707660的博客

04-02

938

如果你打算靠自己摸索自学，那么你首先要了解学习前端的基本大纲，这是你将要学习的主要内容，理解以及掌握好这些内容，便可以找到一份初级的前端开发工作。你还需要有一套完整的前端学习教程，作为初学者最好的方式就是看视频教程学习，初学者容易理解接受。不要选择买书学习，这样的方式没有几个人能学会，基本都是看不下去书，也看不懂书。如果喜欢看书的学弟，可以买一些经典的书籍作为辅助即可，主要还是以看教程为主。每天抽出固定几个小时学习，做好长期学习的准备。

Vue单页面应用列表跳详情返回列表记住当前page信息

javaScriptming的博客

06-21

435

【代码】Vue单页面应用列表跳详情返回列表记住当前page信息。

Vue列表页跳转到详情页返回，页面不刷新保持原来的状态,实现刷新局部数据

w15635748705的博客

04-16

8882

这个问题我最后还是借鉴了大佬的经验，还是大佬牛直接上教程首先在router.js中的列表页中添加缓存的变量： { path: '/', name: 'home', // 列表页 component: home, meta: { keepAlive: true //此页面需要缓存 } 在列表详情页中添加缓冲变量（列表详情页视图不需要缓冲的话不用添加） { path: '/notedetail', name: 'noteDetail',

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

08-28

在 Vue 项目中，页面跳转后返回原页面初始位置是一个常见的问题。今天，我们将分享一个解决这个问题的方法，这个方法使用 Vuex 状态管理器来记录页面的滚动位置。首先，我们需要在 main.js 文件中配置 Vuex 状态...

基于vue循环列表时点击跳转页面的方法

10-18

今天小编就为大家分享一篇基于vue循环列表时点击跳转页面的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue 详情跳转至列表页实现列表页缓存

10-17

主要介绍了vue 详情跳转至列表页实现列表页缓存，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

vue如何通过id从列表页跳转到对应的详情页

08-27

主要介绍了vue如何通过id从列表页跳转到对应的详情页 ,需要的朋友可以参考下

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

陈浩然哦的博客

03-29

7258

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, // 是否到底

从详情页返回列表页，应该回到顶端？

03-02

在一个列表页上点击某个项，进入详情页，再从详情页返回列表页，应该是回到顶端还是回到原地?返回到列表时，列表不应刷新、页面不应回到顶端，应该是返回原地，回到刚才离开的那个位置。对于PC的网页，这个问题并不典型，因为，新链接是在原窗口打开还是在新窗口中打开，这都还没个定论，如果是在新窗口中打开，也就不存在返回列表页的情况了。现在移动设备上，尤其是手机这么小的屏幕上，无节制的打开新窗口肯定不是什么好事儿，是得在同一个窗口里打开详情页了，那么，从详情页返回列表后的问题也就更明显了。PC网页、移动设备APP、软件…应该说，在所有数字产品中几乎都会遇到这个问题。像是这个客户端：点击了左侧某个项，右边开始播

使用vuex记住当前页面页码信息，以便从详情页返回列表页时能还原到上一次页面

商务合作 / 项目定制开发 / 前端一对一培训、答疑

06-13

1655

从以上代码中，你也发现了，其实记住当前页码是使用了`vuex`的这个能保留全局变量的特性，与当前`elementUI`等前端`UI`框架无关，意味着你可以用于任何`vue`项目中

vue中如何实现列表的详情页获取及渲染

浮生离梦的博客

04-09

9330

一、页面跳转方式在页面中有两种跳转方式，第一种跳转方式是使用 a 标签的形式进行跳转，也称之为标签跳转。第二种跳转方式是使用 window.location.href 的形式进行跳转，也称之为编程式跳转。在vue页面中，实现列表页跳转到详情页，也就有两种方式。第一种是标签式跳转，通过router-link的形式进行跳转。第二种是编程式跳转，通过 this.$router.push的形式进行...

js之列表页进入详情页后返回列表页滚动条回到原来位置

wenxiukeke的博客

09-26

2110

列表页进入详情页后返回列表页滚动条回到原来位置，这个问题我是用的localStorage，直接张贴我的代码。 var tur=true; $(function(){ //滚动时保存滚动位置 $(".manager_con").scroll(function(){ if(tur){ setTimeout(scro,500); ...

列表页到详情页，从详情页返回之前列表页的位置

weixin_30396699的博客

12-29

919

背景：对于一般采用同样的技术栈开发的多页面应用来说，可能遇到的状况如下： h5上拉刷新来实现分页，当有很多页的话，点击列表某一页去详细，然后从详情返回上一页，可能刷新上一页，位置不能保持，体验不好列表使用a链接过去的，详情使用window.history.go(-1)返回，有些浏览器不刷新上一页（ios中safari,UC等），有些页面刷新上一页（ios中微信等）有说使用单页的...

Vue (H5)跳转到新页面再返回到旧页面保持状态不变(keep-alive)

qq_66953312的博客

07-07

3652

Vue (H5)跳转到新页面再返回到旧页面保持状态不变(keep-alive)

h5缓存和点击商品列表进入详情页点击返回按钮回到上次打开列表的位置

热门推荐

szl199107101035的博客

08-08

1万+

最近几天能研究了一下客户端的缓存以及cookie的用法。客户端缓存我个人选用一种就是在头部添加cache-control：max-age=(时间)秒，首先是在html的meta标签中添加但是在浏览器中查看到没有起作用，通过检查发现这个页面由于不是静态页面是通过后台数据返回的动态页面所以在meta中添加不起作用。后面与后台沟通让他们加上在浏览器中可以看到如下图：缓存添加成功。

点击列表某一项跳转详情页面并滚动到对应位置

qq_44988714的博客

06-16

891

【代码】点击列表某一项跳转详情页面并滚动到对应位置。

vue H5列表页面点击跳转看详情返回列表页保持在当前位置，代码如何实现

04-28

你可以使用 `keep-alive` 组件来缓存列表页，以保持其状态不变。然后使用路由参数来传递当前位置的信息。在跳转到详情页时，将当前位置信息作为参数传递给详情页，以便在返回时能够准确地回到原来的位置。以下是示例代码：列表页： ```html <template> <div> <keep-alive> <ul> <li v-for="item in items" :key="item.id"> <router-link :to="{ name: 'detail', params: { id: item.id, position: getPosition() } }">{{ item.title }}</router-link> </li> </ul> </keep-alive> </div> </template> <script> export default { data() { return { items: [...], // 列表数据 scrollTop: 0 // 当前滚动位置 } }, methods: { getPosition() { // 获取当前滚动位置 return this.$refs.list.scrollTop } }, mounted() { // 监听滚动事件，更新滚动位置 this.$refs.list.addEventListener('scroll', () => { this.scrollTop = this.$refs.list.scrollTop }) } } </script> ``` 详情页： ```html <template> <div> <h1>{{ item.title }}</h1> <p>{{ item.content }}</p> <button @click="goBack">返回</button> </div> </template> <script> export default { data() { return { item: {}, // 详情数据 position: 0 // 列表页滚动位置 } }, methods: { goBack() { // 返回列表页，并滚动到原来的位置 this.$router.back() setTimeout(() => { this.$refs.list.scrollTop = this.position }, 0) } }, mounted() { // 获取详情数据 const id = this.$route.params.id this.item = this.items.find(item => item.id === id) // 获取列表页滚动位置 this.position = this.$route.params.position } } </script> ``` 注意，以上代码仅为示例，具体实现可能需要根据实际情况进行调整。

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

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

提交

vue H5列表页面 跳转详情返回列表页保持在当前位置

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

vue H5列表页面跳转详情返回列表页保持在当前位置