Pages are rendered twice, when changing layouts

[dobromir-hristov]

trafficstars

Issue

When swapping layouts, pages are getting re-rendered twice. This could be an issue for those using mounted or created hooks to fetch some data, as they get called two times. Did not test if all children also get re-rendered.

How to reproduce

1. Dedicate different layouts, for different routes.
2. Go from one route to the Other

What happens?

The route gets rendered, its layout component emits an event to change the layout, the layout gets replaced, which triggers a render on the page again.

Thank you for the great article, opened my eyes on some patterns a bit. Been scratching my head with this the past few days. I tried with assigning keys and scoped slots and what knot, but no dice..

[maoberlehner]

Thank you for your feedback. I have this problem on my todo list. I'll look into it when I find the time. If you find a solution I'd be very happy if you'd share it with us. Thx!

[dobromir-hristov]

Thanks for replying so fast :)

As I said, been trying out some things, but with no success. Only thing I could think of, was to use the router guards instead of lifecycle hooks, but then you loose that flexibility of nested layouts and the simplicity of the template based approach. It could lead to other issues I guess too, like reverting the layout if deny navigation in a later router guard.

I am not exactly sure how the Vue diffing works for components, as in to stop if from re-rendering children when the dynamic layout is swapped. Not sure who to ask as well :/

[lynnmugambi]

Having the same issue! Let me know if you come up with a solution

[namero999]

Just noticed this as well. The sequence seems to be:

• component created
• component mounted
• layout created
• component created again
• component mounted again
• layout mounted

From a code perspective, the approach makes sense, but I don't like that Vue is re-creating components like this.

[namero999]

I have found a satisfying solution. Would a PR be the best approach to share it with you guys?

[dobromir-hristov]

Please share :)

[namero999]

You can check the solution here -> https://github.com/maoberlehner/dynamic-vue-layout-components/pull/4

[piavgh]

@namero999 : Thank you very much for this elegant solution. It feels more natural to me