Vue.js <；路由器视图/>；在其内部呈现相同的组件

在我的主

App

组件中，我有如下模板设置：

 <div v-if="authenticated" id="app">
    <template v-if="user && metadata">
      <registration v-if="user.user_type.match(/patient/i) && !metadata.registration_complete"/>
      <template v-else>
      ...
      </template>
    </template>
 </div>

<div data-v-6062c645="" class="patient-registration">
    <div data-v-6062c645="" class="container">
        <div data-v-6062c645="" class="patient-registration">
            <div data-v-6062c645="" class="container">
                <div data-v-0bd02235="" data-v-6062c645="" class="agreements">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

我希望

注册

组件渲染其子路由，因此我将路由设置为以下方式：

{
  path: '/registration',
  // name: 'Registration',
  component: Registration,
  children: [
    {
      path: '',
      name: 'Agreements',
      component: Agreements
    }, {
      path: 'information',
      name: 'PersonalInfo',
      component: PersonalInfo
    }
  ]
},

但是输出html在呈现其子协议之前呈现其自身内的注册，如下所示：

 <div v-if="authenticated" id="app">
    <template v-if="user && metadata">
      <registration v-if="user.user_type.match(/patient/i) && !metadata.registration_complete"/>
      <template v-else>
      ...
      </template>
    </template>
 </div>

<div data-v-6062c645="" class="patient-registration">
    <div data-v-6062c645="" class="container">
        <div data-v-6062c645="" class="patient-registration">
            <div data-v-6062c645="" class="container">
                <div data-v-0bd02235="" data-v-6062c645="" class="agreements">
                    ...
                </div>
            </div>
        </div>
    </div>
</div>

---

您在应用程序模板中硬编码了“根”注册组件，然后在应用程序模板中有一个

，当

/Registration

路径匹配时，该注册组件将显示在其位置。这就是注册组件在其内部呈现的原因。好吧，我明白了，我用另一个

替换了它，并获得了预期的效果，尽管我认为我需要改变我现在构建组件的方式。谢谢