vue如何动态修改$router参数

目录 vue动态修改$router参数 动态修改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如何动态修改$router参数的详细内容...