Как реализовать верную работу динамического компонента layout во vue3?

Question

[stanislavkm]

В чем ошибка?

app.vue

<template>
    <component :is="layout">
      <router-view/>
    </component>
</template>

<script>
export default {
  name: 'App',
  computed: {
    layout() {
      const layoutName = this.$route.meta.layout || 'DefaultLayout';
      return () => import(`@/layouts/${layoutName}.vue`)
    }
  },
}
</script>

index.js (роутер)

...
import Home from "../views/Home";
const routes = [
    {
        path: '',
        name: 'Home',
        component: Home,
        meta: {
            layout: () => import('../layouts/DefaultLayout')
        }
    },
...

ну и собственно имеются компоненты DefaultLayout и Home.

Answer 1

[Антон Антон]

Не надо изобретать велосипед, а надо использовать вложенные маршруты https://router.vuejs.org/guide/essentials/nested-r...

Comments

[stanislavkm]

Дело в том, что мне нужны разные шаблоны для соответствующих компонентов

[Антон Антон]

stanislavkm, я говорю, что можно сделать примерно так:

Answer 2

[Александр Медведев]

Для Vite есть удобная штука - vite-plugin-vue-layouts