"슬롯" 구성 요소가 표시되지 않음

"슬롯" 구성 요소가 표시되지 않음

다음 구성 요소를 사용하여 동적 구성 요소를 구축하려고 함slot그러기 위해서, 나는 이것을 가지고 있다.layout:

<template>
    <div class="container-fluid">
        <div class="row">
            LAYOUT NOT CONNECTED    
            <slot />
        </div>
    </div>
</template>

이 있는 곳에는<slot>.

나는 이 구성 요소를 가지고 있다.login:

<template>
    <div>bla bla</div>
</template>

내 앱은:

<template>
    <component :is="layout">
        <router-view />
    </component>
</template>
    
<script>
const default_layout = 'layout-not-connected'
    
export default {
    computed: {
        layout() {
            console.log(this.$route.meta.layout || default_layout)
            return (this.$route.meta.layout || default_layout)
        }
    },
...

그리고 내 경로로는 다음과 같다.

{
    path: '/login',
    name: 'Login',
    meta: { layout : 'layout-not-connected' },
    component: Login
},

결과는 오직 그것뿐입니다.LAYOUT NOT DISPLAYED로그인 컴포넌트가 아니라 디스플레이 된다.

내 실수는 어디 있지?

솔루션 1

명명된 경로를 사용해 보십시오.

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

라우터 인스턴스 동안:

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
      }
    }
  ]
})

솔루션 2

실제 라우터 뷰를 유지하고 일치하는 라우터 객체가 에 있는지 확인routes배열하다

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

및 라우터 인스턴스:

const router = new VueRouter({
  routes: [
    // dynamic segments start with a colon
    { path: '/user/:id', component: User }
  ]
})

참조URL: https://stackoverflow.com/questions/64595880/the-slot-component-is-not-displayed