vue如何动态修改$router参数
作者：榴莲不好吃
这篇文章主要介绍了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'
})以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。