vue修改当前页面query参数

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

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

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

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

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

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

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 })

 

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

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