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 can suscribe to all router navigation. The keyword here is navigation guard. The right one for you would be beforeEach. You could do something like this in Vue Router 4 (in Vue Router 3 you would also have to call next):

router.beforeEach((to, from) => {
  console.log({to, from})
})