Looking for a more elegant way to avoid transitions between nested routes


I have the following setup

<!-- App.vue -->
<router-view v-slot="{ Component, route }">
        <main :key="route.name">
            <component :is="Component" />

<!-- Checkout.vue -->

Checkout.vue handles the its flow using named nested routes. Navigating between these routes forces a re-render of Checkout.vue, which is not what I want.

I presume I could write a function which generates an appropriate key in App.vue thus preventing transitions for specific routes. But is there a better way to achieve this?