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 + TypeScript + Element Plus 开发的内容，感兴趣的话一起来看看吧2021-08-08
这篇文章主要为大家详细介绍了Vue通过封装全局获取焦点指令的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考下2023-12-12
掌握Qwik.js,轻松应对前端SSR渲染问题！本指南将为你揭示如何使用这款强大的框架,让你在前端开发中游刃有余2023-12-12
本篇文章主要介绍了vue如何使用 Slot 分发内容实例详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了Vue 电商后台管理项目阶段性总结，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-08-08
Vue 路由组件向app.vue主文件传值的方式(两种常见方式)
在Vue.js中,可以使用路由传参的方式向App.vue主页面传递数据,有多种方法可以实现这一目标,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧2023-11-11
这篇文章主要介绍了Vuejs从数组中删除元素的示例代码,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-02-02
这篇文章主要介绍了Vue3之 页面,菜单,路由的使用，文章围绕Vue3页面,菜单,路由相关资料展开详细内容,需要的朋友可以参考一下2021-11-11
这篇文章主要介绍了Vue实现自定义字段导出EXCEL的示例代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要为大家介绍了公共Hooks封装useTableData表格数据实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最新评论