Sometimes, we want to update Vue.js component on route change.

In this article, we’ll look at how to update Vue.js component on route change.

How to update Vue.js component on route change?

To update Vue.js component on route change, we can add the beforeRouteUpdate hook into our Vue component.

For instance, we write

<script>
export default {
  //...
  methods: {
    beforeRouteUpdate(to, from, next) {
      const id = to.params.id;
      this.$http.get(id);
      next();
    },
  },
  //...
};
</script>

to add the beforeRouteUpdate to call this.$http.get when the component has changed.

The component is reused in the new route so all existing states are kept.

Conclusion

To update Vue.js component on route change, we can add the beforeRouteUpdate hook into our Vue component.