Every page keeps its route

Pushing a page doesn't destroy the one below: it stays mounted until it leaves the stack. That's why useRoute() inside a page returns that page's route, and it never changes. While /messages/2 sits on top of /messages/1, the first page still sees id: '1', and nothing re-runs because another page moved.

Outside pages (in App.vue, for example), useRoute() follows the page on screen. router.currentRoute is always the page on screen, and router.stack is the whole stack, bottom to top, reactive:

const { stack } = useRouter()
const canGoBack = computed(() => stack.value.length > 1)

useRouter() inside a page navigates in the stack that page lives in: its tab, or its modal.

Props

A route record's props works as in Vue Router: true passes the params as props, an object is passed as-is, a function maps the route. On top of that, push takes props for values that can't be params, like an object to preview while the real one loads.

When a page comes back into view

A page that stays in the stack isn't mounted again when you return to it, so onMounted won't help you refresh it. Use these instead:

onPageActivated(() => refresh()) // shown, and every time the user comes back
onPageDeactivated(() => pause()) // covered by another page or a modal

When the page leaves the stack it is unmounted, so cleanup goes in onUnmounted.