Sometimes, we want to silently update URL without triggering route change in Vue Router.

In this article, we’ll look at how to silently update URL without triggering route change in Vue Router.

How to silently update URL without triggering route change in Vue Router?

To silently update URL without triggering route change in Vue Router, we can use the history.pushState method.

For instance, we write

<script>
export default {
  //...
  methods: {
    addHashToLocation(params) {
      history.pushState(
        {},
        null,
        `${this.$route.path}#${encodeURIComponent(params)}`
      );
    },
  },
  //...
};
</script>

to call history.pushState with the URL we want to go to as the 3rd argument.

This will change the URL without trigger a route change.

Conclusion

To silently update URL without triggering route change in Vue Router, we can use the history.pushState method.