Vue Router - beforeDestroy is called for parent component when children route changes

Question

I have my routes defined like this

{
path: '/menu',
component: () => import('./Menu.vue'),
children: [
  {
    path: 'admin',
    component: () => import('./menus-admin/MenusAdmin.vue'),
    name: 'menusAdmin'
  },
  {
    path: 'import',
    component: () => import('./menus-admin/menus-import/MenusImport.vue'),
    name: 'menusImport'
  }
 ]
}

When I navigate between the admin and import routes using router-link components, the parent Menu.vue component gets destroyed and created again. I would expect the Menu.vue component to no bet destroyed unless I navigate to a completely different route. This is a problem because I have implemented some lifecycle hooks that I don't want to be called over and over when the child routes change. Am I doing something wrong? Is this a bug or is it a feature?

Answer 1

I found my problem. My <router-view> had :key="$route.fullPath" on it. That was forcing it to re-render everything on every route change.

Removed that and it worked as expected.