Bypassing the need to reload the page or refresh the dom, history.pushState is capable of handling the task.
Implement this function within your component or elsewhere to achieve this:

addParamsToLocation(params) {
  history.pushState(
    {},
    null,
    this.$route.path +
      '?' +
      Object.keys(params)
        .map(key => {
          return (
            encodeURIComponent(key) + '=' + encodeURIComponent(params[key])
          )
        })
        .join('&')
  )
}

Simply invoke

addParamsToLocation({foo: 'bar'})

To modify query parameters of the current location without creating a new history entry, consider using history.replaceState instead.

This has been tested on Vue 2.6.10 and Nuxt 2.8.1.

Exercise caution when using this method!
Vue Router does not register changes made by pushState, resulting in an inconsistency with the displayed URL.

After spending a week attempting to add a parameter to my existing URL, which already includes parameters, I finally found a solution. The original URL is:

http://localhost:3000/somelink?param1=test1

this.$router.push({path: this.$route.path, query: {param2: test2} });

This code would simply replace param1 with param2 resulting in

http://localhost:3000/somelink?param2=test2

To overcome this issue, I utilized the fullPath property:

this.$router.push({path: this.$route.fullPath, query: {param2: test2} });

By using fullPath, I successfully added the new parameter without removing the old one. The final URL now looks like this:

http://localhost:3000/somelink?param1=test1&param2=test2

You have the ability to manipulate queries by utilizing this syntax:

this.$router.push({query: {plan: 'private'}})

Referenced from: https://github.com/vuejs/vue-router/issues/1631

If you want to maintain certain parameters but modify others, make sure to create a new copy of the vue router query instead of reusing it.

Here is an example of how to do it using an unreferenced copy:

  const query = Object.assign({}, this.$route.query);
  query.page = page;
  query.limit = rowsPerPage;
  await this.$router.push({ query });

Avoid doing this, as it may cause Vue Router to think you are reusing the same query and trigger a NavigationDuplicated error:

  const query = this.$route.query;
  query.page = page;
  query.limit = rowsPerPage;
  await this.$router.push({ query });

You can also destructure the query object like this, but be cautious about losing any existing query parameters:

  const { page, limit, ...otherParams } = this.$route.query;
  await this.$router.push(Object.assign({
    page: page,
    limit: rowsPerPage
  }, otherParams));
);

Keep in mind that this technique works with both push() and replace() methods.

This code has been tested with vue-router version 3.1.6.

Check out this straightforward approach I've come up with for modifying the query parameters in the URL dynamically without causing a page refresh. Test it to see if it fits your needs.

const updatedQuery = { ...this.$route.query, newParam: 'new-value' };
this.$router.replace({ query: updatedQuery });

Here is my approach, with no need to refresh the page and without encountering any errors:

Avoided unnecessary navigation to the current location

    this.$router.replace(
      {
        query: Object.assign({ ...this.$route.query }, { newParam: 'value' }),
      },
      () => {}
    )

An alternative approach could be utilizing the browser's window.history.replaceState API. This method avoids remounting any components and eliminates unnecessary navigation.

window.history.replaceState(null, '', '?query=myquery');

To learn more about this technique, visit this resource.

this.$router.navigate({ queryParams: Object.merge(this.$route.queryParams, { additional: 'parameter' }) })

When it comes to adding multiple query parameters, I found a solution that worked well for me. I came across this helpful tip on this forum post.

Although a previous answer was on the right track, using Object.assign will mutate this.$route.query which is not ideal. To avoid this, make sure to pass an empty object as the target when using Object.assign.

this.$router.push({ query: Object.assign({}, this.$route.query, { newKey: 'newValue' }) });

For efficiently setting or removing multiple query parameters all at once, I have developed the following methods within my global mixins (where this refers to the vue component):

    setOrRemoveQueryParams(params){
        let updatedQuery = Object.assign({}, this.$route.query);

        Object.keys(params).forEach(key => {
            let value = params[key];
            if(value){
                updatedQuery[key] = value
            } else {
                delete updatedQuery[key]
            }
        })
        this.$router.replace({
            ...this.$router.currentRoute,
            query: updatedQuery
        })
    },

    removeSpecificQueryParams(paramNamesArray){
        let queryParamsToRemove = {}
        paramNamesArray.forEach(key => {
            queryParamsToRemove[key] = null
        })
        this.setOrRemoveQueryParams(queryParamsToRemove)
    },

My usual approach is to utilize the history object for this task, which conveniently avoids page reloading.

Here's an illustration:

history.pushState({}, '', 
                `/newpath/route?params=${this.customParam}`);

A common issue with the Vue router is that it causes the page to reload during updates. To resolve this problem, you can use the following solution:

  const newUrl = new URL(window.location);
  newUrl.searchParams.set('q', 'q');
  window.history.pushState({}, '', newUrl);
        

Here is an example of using the Composition API to achieve the same functionality:

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()

router.push({ path: 'register', query: { plan: 'private' }})
</script>

If you want to verify that it's working correctly, you can use Vue devtools to inspect the current route you're on. Here's a helpful guide:

Update

Keep in mind that this method may cause components to mount and unmount unnecessarily. For a more efficient solution, consider using a vanilla JavaScript approach.

While this question may have been addressed numerous times over the past 7 years, I wanted to share my updated solution for the late 2023.

To ensure that the router view reloads with any change in the browser URL, it's important to include a :key like so:

<RouterView :key="$route.fullPath" />

If there are any updates on the page, simply append a non-breaking value to the current URL. In my case, I add the current Unix timestamp as a query parameter:

import { useRouter} from 'vue-router'

const onClick = async () => {
  router.replace({
        name: 'order',
        params: { id: 1 }, // params
        query: { ver: new Date().getTime() } // query params
      })
}

The resulting URL will appear like this:

http://localhost:5173/order/1?ts=1699792710908

By utilizing router.replace instead of router.push, you replace the current path in the browser's history stack. This ensures that when a user clicks back, they will be taken to a previous page rather than seeing the same page without the timestamp query parameter in the URL. I hope this explanation is clear.

I have yet to discover any drawbacks to this method, so please share your feedback in the comments if you notice any shortcomings.

p.s. This solution is applicable for Vue.js version 3

Using RouterLink

//Using RouterLink
<router-link 
  :to="{name:"route-name", params:{paramName: paramValue}}"
>
Text for Route
</router-link>

//Using Methods

methods(){
  this.$router.push({name:'route-name', params:{paramName: paramValue}})
}

Using Methods to Navigate

methods(){
  this.$router.push({name:'route-name', params:{paramName, paramValue}})
}