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 })这样我们在点击进入详情页后，回退依旧是当前的页码值，之后大家判断调接口就好了！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue2.0模拟后台json数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
在父组件内调用子组件内的事件从而改变子组件的某些状态,父子组件使用<script setup>语法糖,父组件通过给子组件定义ref访问其内部事件,本文给大家介绍了vue3 ref获取不到子组件的解决方法,需要的朋友可以参考下2024-06-06
本文主要介绍了Vuex3和Vuex4有哪些区别，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要为大家介绍了富文本编辑器quill.js开发之自定义格式扩展,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
vue使用event.dataTransfer实现A容器数据拖拽复制到B容器方式
这篇文章主要介绍了vue使用event.dataTransfer实现A容器数据拖拽复制到B容器方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2026-02-02
这篇文章主要给大家介绍了关于vue+elementUI如何实现记住密码功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要介绍了vue项目如何部署运行到tomcat上的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
本篇文章主要介绍了Vue常用指令_V-model用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
这篇文章主要介绍了Vue3如何按照某个字段将数组分成多个数组的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-07-07
让webpack+vue-cil项目不再自动打开浏览器的方法
今天小编就为大家分享一篇让webpack+vue-cil项目不再自动打开浏览器的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论