时间戳

首页 > 解决方案 > 使用 Vue 路由器加载组件

vue.js - 使用 Vue 路由器加载组件

问题描述

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

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

Router View但我也想在这个页面上加载。

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

虽然我将单击router-link然后<app-main />将消失并<router-view />可见。

没有 if 或 show 有没有更好的方法来处理它？

标签： vue.jsvuejs2vue-componentvue-router

解决方案

您可以通过插槽将路由器视图传递给您的应用程序主组件，如下所示：

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

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

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

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

推荐阅读