Silently update url without triggering route in vue-router

Question

Without reloading the page or refreshing the DOM, history.pushState can do the job.

For example: add this method in your component or elsewhere to do that:

addHashToLocation(params) {
  history.pushState(
    {},
    null,
    this.$route.path + '#' + encodeURIComponent(params)
  )
}

Then anywhere in your component you can call addHashToLocation('/my/new/path') to push query params to the window.history stack.

To add query parameters to current location without pushing a new history entry, use history.replaceState instead.

Should work with Vue 2.6.10 and Nuxt 2.8.1.

Be careful with this method, as Vue Router does not know that the URL has changed.