VUEJS-How to remove parameter from url

I know this isn't the best solution, since it relays on a third-party library.

Lodash is a suite of functions to manage collections of data.

If you want to remove the 's' query Param from the URL, using Lodash, you can do:

// remove a param from $route.queryvar newRouteQuery = _.omit(this.$route.query, 's');this.$router.replace( { query: newRouteQuery } );

The _.omit() Lodash's function takes as first argument an Object, and returns the same object but without the items who's keys are listed in the second argument. Since, in this case, we only pass a string as the second argument (the string 's'), the function will only omit one index of the object.

A vanilla-javascript implementation of this function would be something like this (note: ie8 doesn't support this, keep it in mind if you're not using webpack).

// Omit 's' from vue router query paramsvar newRouteQuery = {};Object.keys(this.$route.query).forEach(function(key){    if (key != 's')        newRouteQuery[key] = this.$route.query[key];});

To pass all of this parameters to PHP, you basically need an Ajax API to send requests. You can pass the contents of this.$route.query to the server either via POST, GET or any other method.

Using the Fetch API (which doesn't require any extra library and has almost complete browser support), you can do something like this:

return fetch('/process.php', {    method: 'POST',    cache: 'no-cache', // don't cache the response    credentials: 'omit', // don't send cookies    body: JSON.stringify(this.$route.query)}).then(function(response){    // ...

In this case I'm sending a POST request with the data as a JSON string in the body of the request. There are different ways to send data and different types of requests. You should investigate the best method for your PHP enviroment and for your JS enviroment (you might already be loading an Ajax library).

One option would be to use vuex and store your cities in the store -state provided. You can then use the cities stored here to select the relevant ones.

Because your cities are stored in the vuex store you will also be to access them when you want to post to php. You can create an action in your store to do this.

The documentation one the web is very easy to follow.

Vuex documentation

With Vue 3 and Vue Router 4 I was able to figure it out.

For brevity, adding a query parameter I would do this:

router.push({ name: 'Search', query: { 'q': searchCriteria.value } });

And then to (in my case) clear out ALL of the parameters, I only had the one, do this:

router.push({ name: 'Search' });

I suppose, if you have another parameter like this:

router.push({ name: 'Search', query: { 'q': searchCriteria.value, 'b': 'Another' } });

You could do this (I assume, I did not test it):

router.push({ name: 'Search', query: { 'b': 'Another' } });