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>