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

更新时间：2024年08月08日 09:10:35 作者：三千数优一

这篇文章主要介绍了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 })

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

总结

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

您可能感兴趣的文章:

Vue3.2中setup语法糖的使用教程分享
这篇文章主要为大家详细介绍了Vue3.2中setup语法糖的具体使用方法，文中的示例代码讲解详细，对我们深入了解Vue有一定的帮助，需要的可以参考一下
2023-05-05
vue+element-ui监听滚动实现锚点定位方式(双向),锚点问题
这篇文章主要介绍了vue+element-ui监听滚动实现锚点定位方式(双向),锚点问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
vue如何实现observer和watcher源码解析
这篇文章主要为大家详细介绍了vue如何实现observer和watcher源码的相关资料，分析vue的observe实现源码，聊聊如何一步一步实现$watch，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-03-03
vue实现列表展示示例详解
这篇文章主要为大家介绍了vue实现列表展示的示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
vue如何通过image-conversion实现图片压缩详解
在Vue项目中上传大图片时,可以通过image-conversion库压缩至指定大小,这篇文章主要介绍了vue如何通过image-conversion实现图片压缩的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-12-12
自定义vue全局组件use使用、vuex的使用详解
本篇文章主要介绍了自定义vue全局组件use使用、vuex的使用详解，本文主要来讲解一下怎么样定义一个全局组件,并解释vue.use()的原理
2017-06-06
vue项目配置使用flow类型检查的步骤
这篇文章主要介绍了vue项目配置使用flow类型检查的步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-03-03
Vue中进行打包与部署的方法实例
这篇文章主要给大家介绍了关于Vue中进行打包与部署的相关资料, 我们常使用前后端分离项目时,会需要将前端vue打包然后部署,需要的朋友可以参考下
2023-09-09
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
今天小编就为大家分享一篇对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
将Vue组件库更换为按需加载的方法步骤
这篇文章主要介绍了将Vue组件库更换为按需加载的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05