Переопределение рендеринга компонентов VW на push - PullRequest
Новая
       2

Переопределение рендеринга компонентов VW на push

0 голосов
/ 19 октября 2019

Я создал глобальный компонент, которым я делюсь по нескольким маршрутам. Я упростил компонент ниже для демонстрационных целей. 

#name area-wrapper
<template>
<div id="area">
    <div id="area-menu">
        <menu/>
    </div>
    <div id="area-content">
        <slot/>
    </div>
</div>
</template>

В меню находится панель навигации, в которой есть опции, которые изменят содержимое slot, которое я мог бы просто превратить в компонент component v-bind:is.

Что я сделалсоздается несколько страниц для маршрутизации 

  pages
    _entity <--*** forgot to include this ***
      app
        index.vue
        _appId.vue
        new.vue

Каждая из этих страниц включает в себя компонент, описанный выше, а затем добавляет в свой собственный контент для id="area-content

Что я заметил, так это то, что весьarea-wrapper перезагружается, когда я перехожу с

  • website.com/app/112 (pages/app/_appId.vue)
  • website.com/app/11 (pages/app/_appId.vue)

Я заметил, что если я переместу area-wrapper к макету, то он работает, проблема в том, что компонент в конечном итоге будет совместно использоваться с несколькими apps, но будет иметь другое <menu/>, а макеты не имеют slots

Я не уверен, почемуvue выполняет рендеринг всего компонента, даже если он используется для всех страниц и одинаков для всех страниц.

Что мне здесь не хватает?

Если это ожидаемое поведение, мой вопросстановится, как я могу создать общий компонентпри этом действует как макет, который я включаю в несколько страниц, не настраивая props и не перезагружая его

+ ==== ОБНОВЛЕНИЕ ==== +

я пыталсячтобы заставить работать гнезда, потому что я верю, что это то, что я после. Однако nuxt генерирует их неправильно

В соответствии с документацией (``) мне нужно изменить структуру на 

  pages
    _entity
      messaging
        settings
          index.vue
        msg
          index.vue
        messaging.vue(wrong - changed back to index.vue) -> within here add the <nuxt-child> component 
      messaging.vue(need to move to _entity folder to create children)

nuxt, чтобы создать дочерние компоненты. Однако он все еще продолжает создавать полные маршруты. Я использую nuxt-i18n это вызовет проблемы?

маршруты 

...
{
  path: "/:entity/messaging/messaging",
  component: _8a865700,
  name: "entity-messaging-messaging___en"
}, {
  path: "/:entity/messaging/:msg?",
  component: _1ef926cc,
  name: "entity-messaging-msg___en"
}, {
  path: "/:entity/messaging/settings",
  component: _7b358e6a,
  name: "entity-messaging-settings___en"
}

Ответы [ 2 ]

0 голосов
/ 08 ноября 2019

Я изначально создал вложенный маршрут в папке. Вместо этого вам нужно поместить родительскую страницу в корень того каталога, в котором находится папка. 

pages
 _entity
  messaging
    settings
      index.vue
    msg
      index.vue
    messaging.vue(wrong - changed back to index.vue) -> within here add the <nuxt-child> component 
  messaging.vue(need to move to _entity folder to create children)
0 голосов
/ 19 октября 2019

Вы должны определить маршрутизацию в своем приложении, как предложено здесь (чистое Vue) или здесь (с vue-router). Без этого вы перезагружаете целую страницу (и приложение) при изменении URL.

...