Nested router-views: don't invoke lifecycle, when child route changes

[rowild]

In my little app I want to use at least 2 layouts, important part being that there shall be animations once a route is entered / left. In the "MainLayout" (https://[domain]/catalog-of-works) the menu is constructed: whenever a link is clicked there, a child template is supposed to be loaded("(https://[domain]/catalog-of-works/:category).

The problem is that whenever a child element (the "nested route") is loaded, a "complete route change" is detected and invokes "onMounted" of "MainLayout", too.
This is not what I want to achieve. Instead, the onMounted and onLeave lifecycle hooks of "MainLayout" should only be invoked, when the main domain "https://[domain]/catalog" is left and changes to another domain (e.g. "https://[domain]/" or "https://[domain]/books").

I put together a really ugly template here on stackblitz:

https://stackblitz.com/edit/quasarframework-enyltx?file=src%2Flayouts%2FMainLayout.vue

A little red square fading in at the top left indicates that the "onMounted" method is called, whenever another catalog category is invoked. (Also, see console, where "onBeforeAppear", "onAppear" and "onMounted" are logged).
But, as mentioned: this is not what I want. The square (and therefore the menu) shall only "react" on first load and on leave.

Any idea what I have to do to fix this?

For conveniance, here is the content of routes.js:

const routes = [
  {
    path: '/',
    component: () => import('layouts/StartpageLayout.vue'),
    children: [
      { path: '', component: () => import('pages/IndexPage.vue') }
    ]
  },
  {
    path: '/main',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: '',
        component: () => import('pages/MainPage.vue'),
        children: [
          {
            path: 'subsite-one',
            component: () => import('pages/main/SubsiteOnePage.vue.vue')
          },
          {
            path: 'subsite-two',
            component: () => import('pages/main/SubsiteTwoPage.vue.vue')
          }
        ]
      }
    ]
  },
  {
    path: '/catalog-of-works',
    component: () => import('layouts/MainLayout.vue'),
    children: [
      {
        path: ':category',
        component: () => import('pages/catalog/CatalogOfWorks.vue'),
      }
    ]
  },
  {
    path: '/startpage/home',
    redirect: '/'
  },
  // Always leave this as last one, but you can also remove it
  {
    path: '/:pathMatch(.*)*',
    component: () => import('pages/PageNotFound.vue')
  }
]

export default routes

[yusufkandemir]

(Your old discussion thread: #13243)

In your App.vue you have this:

<router-view v-slot="{ Component, route }" v-else>
  <Transition appear mode="out-in" :css="false" :key="route">
    <component :is="Component" />
  </Transition>
</router-view>

:key="route" makes Transition re-render on each route. Re-rendering Transition also means re-rendering each component on the tree, which includes MainLayout.

See this one which doesn't makes everything re-render on each route change. It uses the most basic App.vue:
https://stackblitz.com/edit/quasarframework-sx7ovb?file=src%2FApp.vue

We can't precisely know what's going on with the loading, transition, etc. stuff. So, can't say much about the rest.

[rowild]

@yusufkandemir I highly appreciate your answer and feedback! Thank you very, very much! Now I do understand the relevant documentation better:
https://router.vuejs.org/guide/advanced/transitions.html#forcing-a-transition-between-reused-views

Removing the Transition component from the router-view in App.vue is problematic for me, though. I'd like to try to outlin my thinking behind the structure of my little app:

• App.vue's router-view with Transition takes care of animations that happen in onAppear and onBeforeRouterLeave in the layout components

(Sidenote: Those are gsap timeline animation the list elements of the menu in MainLayout.vue, calling next() in the onComplete callback - that works fine, but is not part of this example for the sake of shortness)

• [Layout].vue's router-view take care of animations that happen in the components loaded into a child-route (the pages that correspond to the menu item's routes)

The home page, with "StartpageLayout" being one part of it, essentially only has an enter button, meaning: there is no menu and not many api calls. The idea is to make something load and appear as fast as possible.
The other pages, which all include "MainLayout" will then load the menu. From here on it is a "regular" SPA with navigation.

Taking away Transition in App.vue will eventually robb me of the possibility to animate anything in the "[...]Layout.vue" files (mainly the Menu), because there won't be any transition hooks available, right?

in your example, which does not call onMounted anymore, that lifecycle hooks still get called on the menu, when the child changes (onEnter, onBeforeEnter). Why is this happening? I thought Vue only exchanges content that changed? Why does it detect a onEnter, when a child route changes? IMO it should stay quiet...

Thinking out loud: Do I need a watcher that observes the route? And once it detects that there is a change in the "layout" route, a navigation guard is programmatially created? (If that is at all possible?)

PS: A more complete example that includes those animations is here:
https://github.com/rowild/jvds-vue3
but it needs a Directus 9 BE.

[yusufkandemir]

in your example, which does not call onMounted anymore, that lifecycle hooks still get called on the menu, when the child changes (onEnter, onBeforeEnter). Why is this happening? I thought Vue only exchanges content that changed? Why does it detect a onEnter, when a child route changes? IMO it should stay quiet...

You also have :key="route" there. You are explicitly telling Vue to re-render the whole component tree, so it doesn't apply its diffing algorithms and such. I would suggest giving this a read: https://vuejs.org/api/built-in-special-attributes.html#key

The main problem here is that as you said, if you take out the transition altogether or just the :key="..." part, then your transitions layout&page transitions might not work the way you expect. You can still animate parts that are not rendered inside router-view, so you can animate the menu items(e.g. MenuComponent), but not the related page contents when you click a menu item which are rendered inside router-view. If you keep it, then this re-rendering will happen. I am not aware of the perfect solution to this.

I would recommend getting rid of transitions for now to address your logical/functional problems and understanding the regular behavior of lifecycle hooks. Then, after getting them sorted, add transitions back one by one for each level, then observe the behavior to understand how it affects you, then try to produce a solution for that specific problem.

Thinking out loud: Do I need a watcher that observes the route? And once it detects that there is a change in the "layout" route, a navigation guard is programmatially created? (If that is at all possible?)

This will not change the fact that it gets re-rendered multiple times. But, if you decide that you definitely need the transitions the way they are now, you might give this a try. You might be able to use route.matched to get the parent routes where the layout is set, then decide to execute a logic. But, since it will get re-rendered, you will not be able to actually detect if the route get changed. You need to put this logic outside somewhere which the logic will not get re-created every time. I hope it makes sense, good luck.

[rowild]

@yusufkandemir This is a really great guide you provided me here! Thank you very, very mich, highly appreciated!

[rowild]

@yusufkandemir I dare to address you again with this topic, hoping you find a moment to take a glimpse I posted here:
https://stackoverflow.com/questions/73415021/vurrouter-transitions-on-more-than-one-router
(An example on stackblitz is included.)

The key problem is that I check from and to routes against their meta.layoutKey values. Even though they are the same over routes like /main and /main/:child, a "re-mount" is initiated (sorry, I am struggling to find the proper word...)

However, changes between /main/:child do NOT cause re-mounts...

BTW: An important input came from Danny's Quasar-iOS Youtube tutorials:
https://www.youtube.com/watch?v=gwFr15NKWko&list=PLAiDzIdBfy8gRLnMGvfm6NWHHKwFOzmrV&index=9

Thank you!