The page component re-renders twice after changing and replacing the layout component.

[Mini-ghost]

Problem Reproduction:
https://stackblitz.com/edit/vue-dynamic-layout?file=src%2FApp.vue,src%2Fmain.ts&terminal=dev

I am currently using vue-router's meta to switch between different layouts for different pages. To reduce the bundle size, dynamic loading is used for the layout components.

However, when switching from page A to page B, which have different layouts, the page component gets rendered twice.

In the video below, "render page b with layout b" is printed twice when switching from page A to page B for the first time:

2023-07-01.11.20.35.mov

The code is written in App.vue in the video is as follows:

<script lang="ts">
const layouts = {
  a: defineAsyncComponent(() => import('./components/LayoutA.vue')),
  b: defineAsyncComponent(() => import('./components/LayoutB.vue')),
};
</script>

<script setup lang="ts">
import {
  computed,
  defineAsyncComponent,
  provide,
} from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const layout = computed(() => route.meta.layout);

provide('layout', {
  layout,
});
</script>

<template>
  <div>
    <div>{{ layout }}</div>
    <RouterLink to="/">page a</RouterLink> |
    <RouterLink to="/about">page b</RouterLink>

    <Suspense>
      <Component :is="layouts[layout]">
        <RouterView />
      </Component>
    </Suspense>
  </div>
</template>

If I make the following change to the code, the problem will be resolved:

<script lang="ts">
const layouts = {
  a: defineAsyncComponent(() => import('./components/LayoutA.vue')),
  b: defineAsyncComponent(() => import('./components/LayoutB.vue')),
};

const Layout = defineComponent({
  name: 'Comp',
  props: {
    name: {
      type: String,
    },
  },
  setup(props, context) {
    return () => h(layouts[props.name], context.attrs, context.slots);
  },
});
</script>

<script setup lang="ts">
import {
  computed,
  h,
  defineComponent,
  defineAsyncComponent,
  provide,
} from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const layout = computed(() => route.meta.layout);

provide('layout', {
  layout,
});
</script>

<template>
  <div>
    <div>{{ layout }}</div>
    <RouterLink to="/">page a</RouterLink> |
    <RouterLink to="/about">page b</RouterLink>

    <Suspense>
      <Layout :name="layout">
        <RouterView />
      </Layout>
    </Suspense>
  </div>
</template>

2023-07-01.11.32.18.mov

I'm not sure why this happens, but when I separate the Layout component into a standalone component and perform the same logic inside it, there is no issue with repeated rendering. I'm very curious to know the reason behind this. Can someone share their thoughts on this?

Thank you.

[Shyam-Chen]

You can directly use Nuxt to set up a project and handle layouts, or you can refer to my vite-plugin-vue-routes for guidance.

[chenxch]

You can add an initialization print to LayoutB and you'll be able to figure it all out.