Watching route change with Laravel Inertia

Question

Using the new Inertia Laravel stack – how do you watch route change?

I am trying to do something very simple in the likes of:

watch: {
  route () {
    console.log('You changed route')
  }
}

I haven't been able to find any information on this.

Answer 1

You'll need to listen to the start event.

import { Inertia } from '@inertiajs/inertia'

Inertia.on('start', (event) => {
  console.log(`The route changed to ${event.detail.visit.url}`)
})

Note the start event is triggered before the load completes. If you want to get notified once the new page is displayed, use the success event.

For more info, check out https://inertiajs.com/events

Answer 2

You can also do:

watch: {
  '$page.url': function (newUrl, oldUrl) {
    console.log(newUrl)
  }
}