Question

在我的Vue应用程序中，如何在工具栏组件中放置组件（插槽？）？

例如我的应用

<template>
  <toolbar>…</toolbar>
  <router-view />
</template>

并且所有路由都是延迟加载的。

对于某些路线，我想将组件放置在工具栏组件内。但是我不能将组件“插入”为插槽。并编写组件并使用v-if打开/关闭在我看来是错误的。

我认为我希望是

 <div for="toolbar">This content should in toolbar</div>
 <div for="router-view">This content for router-view</div>

有什么办法解决这个问题？

Answer 1

Vue路由器Named Views将派上用场。

有时您需要同时显示多个视图嵌套它们，例如使用sidebar视图和main创建布局视图。这是命名视图派上用场的地方。而不是一个您认为单个出口，您可以有多个出口，并给每个出口他们一个名字。没有名称的router-view将被赋予default作为其名称名称。

一个视图是通过使用组件呈现的，因此，多个视图对于同一路径需要多个组件。确保使用components（和 s）选项：

<template>
  <toolbar><router-view name="toolbar"></router-view></toolbar>
  <router-view />
</template>


const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: YourAwesomeComponent,
        toolbar: YetAnotherAwesomeComponent
      }
    },
    {
      path: '/home',
      components: {
        default: YourAwesomeHomeComponent,
        toolbar: YetAnotherAwesomeComponentThatSouldBeInToolbarOnHomePage
      }
    }
  ]
})

如何通过延迟加载将组件放在标头中？

1 个答案: