vue-router: проблема вложенных именованных представлений. Дополнительный компонент не виден - PullRequest
Новая
       10

vue-router: проблема вложенных именованных представлений. Дополнительный компонент не виден

0 голосов
/ 06 января 2019

Я нашел этот пример в документации vue-router:

https://jsfiddle.net/posva/22wgksa3/?fbclid=IwAR2WITnr6cmA_3rUgOCCvPrHASKfSW9QsvEKv4HrxBmuDUN1VmWSWufCtAI

const router = new VueRouter({
   mode: 'history',
   routes: [{ 
       path: '/settings',
       // You could also have named views at tho top
       component: UserSettings,
       children: [{
           path: 'emails',
           component: UserEmailsSubscriptions
           }, {
           path: 'profile',
           components: {
               default: UserProfile,
               helper: UserProfilePreview
           }
       }]
   }]
})

Я пытался сделать что-то вроде этого:

https://jsfiddle.net/pt9o6h8e/

const router = new VueRouter({
   mode: 'history',
   routes: [{ 
       path: '/settings',
       components: {
           default: UserSettings,
           test: TestComponent
       }
       children: [{
           path: 'emails',
           component: UserEmailsSubscriptions
           }, {
           path: 'profile',
           components: {
               default: UserProfile,
               helper: UserProfilePreview
           }
       }]
   }]
})

но TestComponent не отображается. Почему?

1 Ответ

0 голосов
/ 06 января 2019

Когда вы указали свой маршрут, как это, 

{ 
  path: '/settings',
  // You could also have named views at tho top
  components: {
    default: UserSettings,
    test: TestComponent
  }
}

UserSettings и TestComponent считаются родственными компонентами, поэтому при рендеринге он будет искать имя router-view рядом со значением по умолчанию router-view, которое вы указали в самом верхнем элементе div, #app.

Однако вы положили <router-view name="test" /> внутрь UserSettings шаблон, поэтому он не нашел router-view для визуализации TestComponent к.

Чтобы это исправить, либо переместите test вид маршрутизатора с UserSettings на #app. 

<div id="app">
  <h1>Nested Named Views</h1>
  <router-view></router-view>
  <router-view name="test" class="us__content us__content--helper"/>
</div>

Или, если вы хотите сохранить его внутри UserSettings, измените способ его объявления, переместив test: TestComponent в любой из ваших дочерних маршрутов.

См. рабочий пример .

...