最近在项目中手写分页器(为什么手写,因为对分页器样式外观要求比较严苛),遇到一个需求,就是我们在点击分页的时候,再进入详情,之后回退希望能够回到之前的页码值。

解决这个需求,个人总结了两种方法。

1:对标百度,不知道大家有没有发现 百度在进入详情页采取的方式是新开一个页面,这样我们回退到列表页的时候,页码值保持不变。

这是一种可取的简单的方式,实现思路为:

生成一个a链接,然后指定a的href属性和target属性,再模拟a的点击事件即可!

2:但是有时候我们的甲方不想新开页面怎么办,这里就可以通过修改vuequery参数来实现。

2-1:我们在进入这个列表页的时候,给一个初始默认值,例如:page=1

 

不用担心页面路由问题,只要问号前面的路由是对的,不影响页面跳转

2-2:我们需要在分页器事件的时候改变浏览器中的query

 

其中的currentPage是我们当前的页码值,我们就是将它赋值给我们的query里面的参数

从而实现点击分页器,就能动态的改变路径中的值。


        const query=JSON.parse(JSON.stringify(this.$route.query))
        query.page=this.currentPage//你的分页器页码值变量
        this.$router.push({ path: this.$route.path, query })

 

这样我们在点击进入详情页后,回退依旧是当前的页码值,之后大家判断调接口就好了!

最后谢谢大家,如果能帮助到你,希望你回来帮我点个赞!

 

 

Logo

前往低代码交流专区

更多推荐