My app utilizes :key="$route.path" in the router view for transitions, but this approach leads to the child route base view being refreshed and triggering certain APIs again.
Routes:
{
path: "/some-route",
component: () => import("@/views/SomeView/SomeViewBase.vue"),
children: [
{
path: "view/:entity_id",
name: "some-entity-details",
component: () => import("@/views/SomeView/SomeEntityDetails.vue"),
},
{
path: "update/:entity_id",
name: "some-entity-update",
component: () => import("@/views/SomeView/SomeEntityUpdate.vue"),
},
]
}
SomeViewBase.vue:
<template>
<div>
<div class="flex justify-between items-center">
// Some content here
</div>
<RouterView />
</div>
</template>
<script setup lang="ts">
// Some logic here along with some API calls
</script>
The issue arises when switching between the child routes also causes a refresh of the base view. Although removing :key from App.vue resolved the problem, it compromised the animations.
I originally anticipated that utilizing child routes would only refresh the child route view if the route matches those specified in the children array.