使用Vue Router加载组件

Question

我想一次加载3个组件，例如：

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

但是我希望在这个页面上也加载Router View。

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

当我点击router-link时，<app-main />会消失，<router-view />会显示。

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

- Mr. Perfectionist

Answer 1

您可以通过插槽将router-view传递给您的app-main组件，如下所示：

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

您需要在app-main组件中插入一个插槽标记，如下所示：

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

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

- piemekanika

---

谢谢，但我需要用router-view替换app-main。 - Mr. Perfectionist

Answer 2

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

- Sourabh Ranka