使用 Vue 路由器加载组件

Question

我想像这样一次加载 3 个组件：

<app-header />
<app-main />
<app-footer />

但我也想在此页面中加载Router View。

<app-header />
<router-view />
<app-footer />

当我点击router-link 时，<app-main /> 将消失，<router-view /> 将可见。

有没有更好的方法来处理它而不使用 if 或 show？

Answer 1

您可以像这样通过插槽将路由器视图传递给您的应用程序主组件：

<app-header />
<app-main>
  <router-view/>
</app-main>
<app-footer />

你还需要像这样在你的 app-main 组件中插入一个 slot 标签：

<template>
  <!-- your code -->
    <slot></slot>
  <!-- ... -->
</template>

更多详情请访问https://vuejs.org/v2/guide/components-slots.html