Reactive Routes

It took me way too long to figure this one out, but here it is:

// Doesn't change when route changes
const route = useRoute();

// Changes when route changes
const path = useRoute().path;

If we need the full route object in a reactive way, we can do this:

// Doesn't change when route changes
const route = useRoute();

// Changes when route changes
const route = useRouter().currentRoute.value;

With the Options API you can use $route and $router to get objects that update whenever the route changes.

Since Nuxt uses Vue Router internally, this works equally well in Nuxt and vanilla Vue apps.

Here's a demo to see this for yourself: Demo