使用 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 />

此外，您还需要在应用程序主组件中插入插槽标签，如下所示：

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

有关更多详细信息，请访问 https://v2.vuejs.org/v2/guide/components-slots.html

Answer 2

您可以从模板中删除<app-main />将其替换为 <router-view/> ，现在每当您需要 app-main 组件或其他组件时，请使用路由定义对其进行配置。