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' })

注意: 该方法只替换地址栏参数,不会再历史记录里面产生记录,按浏览器回退按钮会回到上一个界面.
  • 4
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值