vue如何动态修改$router参数
更新时间:2022年09月23日 10:00:51 作者:榴莲不好吃
这篇文章主要介绍了vue如何动态修改$router参数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
vue动态修改$router参数
// 创建一个包含当前 URL 参数的对象 export const getURLParameters = (url) => (url.match(/([^?=&]+)(=([^&]*))/g) || []).reduce( (a, v) => ( (a[v.slice(0, v.indexOf('='))] = v.slice(v.indexOf('=') + 1)), a ), {} ); /** * 替换地址栏参数 * @param {key,value} */ export const replaceRouteQuery = (query, params) => { let href = window.location.href; let origin = href.split('?')[0]; const routeObj = Object.assign({}, getURLParameters(href)); for (let key in params) { routeObj[key] = params[key]; } let isFirst = true, str = ''; for (let key in routeObj) { str += `${isFirst ? '?' : '&'}${key}=${routeObj[key]}`; isFirst = false; } href = origin + str; if (window.history) { // 支持History API window.history.replaceState(null, '', href); } Object.assign(query, params); }; // 调用: replaceRouteQuery($route.query, { 'startDate': '2020-01-01' })
注意:该方法只替换地址栏参数,不会再历史记录里面产生记录,按浏览器回退按钮会回到上一个界面。
动态修改router路由所带参数
import merge from 'webpack-merge'; //修改原有参数 this.$router.push({ query:merge(this.$route.query,{'XXXXXXXX':'630'}) }) //新增一个参数: this.$router.push({ query:merge(this.$route.query,{'XXXXXXXX':'我是新增的一个参数,哈哈哈哈'}) }) //替换所有参数: this.$router.push({ query:merge({},{'XXXXXXXX':'630' })
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue获取当前日期时间(使用moment和new Date())
在项目开发中我遇到了日期范围选择器,两种获取当前日期并做处理的写法,这里记录一下,下面这篇文章主要给大家介绍了关于vue获取当前日期时间(使用moment和new Date())的相关资料,需要的朋友可以参考下2023-06-06Vue整合Node.js直连Mysql数据库进行CURD操作过程详解
这篇文章主要给大家分享Vue整合Node.js,直连Mysql数据库进行CURD操作的详细过程,文中有详细的代码讲解,具有一定的参考价值,需要的朋友可以参考下2023-07-07详解为element-ui的Select和Cascader添加弹层底部操作按钮
这篇文章主要介绍了详解为element-ui的Select和Cascader添加弹层底部操作按钮,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2020-02-02
最新评论