不显示“插槽”组件

Question

我尝试使用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而不显示登录组件。

我的错误在哪里？

Answer 1

解决方案1 ​​

尝试使用named-routes：

<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 }
  ]
})