SoFunction
Updated on 2025-04-05

How to dynamically modify $router parameters for vue

vue dynamically modify $router parameters

// Create an object containing the current URL parametersexport const getURLParameters = (url) =>
  ((/([^?=&]+)(=([^&]*))/g) || []).reduce(
    (a, v) => (
      (a[(0, ('='))] = (('=') + 1)), a
    ),
    {}
  );
 
/**
 * Replace address bar parameters
 * @param {key,value}
 */
export const replaceRouteQuery = (query, params) => {
  let href = ;
  let origin = ('?')[0];
 
  const routeObj = ({}, 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 () {
    // Support History API    (null, '', href);
  }
 
  (query, params);
}; 
 
// Call:replaceRouteQuery($, { 'startDate': '2020-01-01' })

Note: This method only replaces the address bar parameters, and no records will be generated in the history record. Pressing the browser fallback button will return to the previous interface.

Dynamically modify the parameters brought by router routes

import merge from 'webpack-merge';
 
//Modify the original parametersthis.$({
    query:merge(this.$,{'XXXXXXXX':'630'})
})
 
//A new parameter:this.$({
    query:merge(this.$,{'XXXXXXXX':'I'm a new parameter, hahahaha'})
})
 
//Replace all parameters: this.$({
    query:merge({},{'XXXXXXXX':'630'
})

The above is personal experience. I hope you can give you a reference and I hope you can support me more.