Enable (console) logging of router events in Vue

Question

Somewhere in my Vue and Vuex application I suspect a (Vue) router push is triggered. To debug this I would like to enable logging of some sort, see all routing events pass by in my console. How can I do this?

I've searched the Vue Router guide for things like "logging", "events", and "console" but found nothing. In Angular I could just subscribe to all router events in a top level component, and I guess I'm looking for something similar.

So, in short: how can you enable logging for Vue Router events?

Answer 1

You need to log the changes in the router-view.

So, in the component that has your <router-view><router-view/> tag, simply watch for router change:

watch: {
    '$route' (to, from) {
      console.log('Route changed from ' + from.path + ' to ' + to.path); 
    }
}

Let me know if this isn't you're looking for.