Question

在我的主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>

和Registration组件的模板如下所示：

<template>
  <div class="patient-registration">
    <div class="container">
      <router-view/>
    </div>
  </div>
</template>

我希望Registration组件呈现它的子路由，所以我设置了这样的路由：

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

但输出html在渲染它的孩子Agreement之前呈现注册本身：

<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组件在呈现它的子项之前会在其自身内呈现一次。我怎么能让它像这样渲染？

<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>

<router-view>在自身内部渲染相同的组件

0 个答案: