How to remove parameter from url using vue-router

Question

I have multiple parameters in url. I am adding new parameter in url with following code:

this.$router.push({query: Object.assign({}, this.$route.query, {cities: '1,45'})});

But when I unselect cities, still it keep last id with cities param in url:

projects#/?cities=2189673&gender=male&range=100

Actually I want to remove cities parameter only. How can I do?

Further how to get all params of url to post to php?

Threnody

This answer might help you to remove object properties – Pinniped

Ye already, I am doing same, But address bar doesn't take effect – Threnody

Answer 1

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.query
var 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 params
var 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).

Laban

Answer 2

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

Anatomize

Answer 3

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

Roussillon

This does work in Vue2/VueRouter3 too. – Koonce

Answer 4

To replace token but keep other query parameters you can use router.replace or router.push ;

router.beforeEach(async (to, from) => { ...
      // construct new query {} without 'token' and push it
      const query = (({token, ...o }) => o)(to.query)
      router.push({ name: to.name,  query: query });

Orbit