Vue-Router如何动态更改当前页url query

Vue-Router动态更改当前页url query

在网上试过很多方法。仅这一种生效。

猜测可能是浅拷贝的问题。

Vue-Router版本：3.2.0

// 需要被注入的query
const uid = "12345";
// 原url query
const {...query} = this.$route.query;
// 替换新query
this.$router.replace({query: {...query, uid}});

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

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。