vue.js - маршрутизация в архитектуре вложенных компонентов - PullRequest
Новая
       24

vue.js - маршрутизация в архитектуре вложенных компонентов

0 голосов
/ 28 мая 2018

Я использую vue.js для разработки приложения администрирования и пытаюсь построить архитектуру пользовательского интерфейса как можно более модульной.Поэтому я настроил и обернул Header, Body, Sidebar и Main в отдельные файловые компоненты, как показано ниже.

Дерево 

App
- Header
  - dynamic content
- Body
  - Sidebar
    - dynamic content
  - Main
    - dynamic content

Графический 

┌──────────────────────────────────────────────────────────┐
│ HEADER                              SOME DYNAMIC CONTENT │
├──────────────────────────────────────────────────────────┤
│ BODY                                                     │
│┌──────────┬─────────────────────────────────────────────┐│
││ SIDEBAR  │ MAIN                                        ││
││          │                                             ││
││ SOME     │ SOME DYNAMIC CONTENT                        ││
││ DYNAMIC  │                                             ││
││ CONTENT  │                                             ││
││          │                                             ││
│└──────────┴─────────────────────────────────────────────┘│
└──────────────────────────────────────────────────────────┘

Теперь у каждого из этих компонентов есть свое собственное представление маршрутизатора для отображения динамического содержимого в зависимости от текущего маршрута.Как я могу добиться этого, когда у меня есть только один единственный вид маршрутизатора, доступный в vue.js?Разве невозможно как-то адресовать эти динамические компоненты в целом через компонент с маршрутизацией представления, не переопределяя исходное содержимое, подобное php Smarty, как это?

aboutus.vue 

<template>
    <div>
        <header>
            <header-content>
                About us - Header
            </header-content>
        </header>
        <sidebar>
            <sidebar-content>
                About us - Sidebar
            </sidebar-content>
        </sidebar>
        <main>
            <main-content>
                About us - Main
            </main-content>
        </main>
    </div>
</template>

<script>
    /* ... */
</script>

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

1 Ответ

0 голосов
/ 28 мая 2018

Я попытался добиться чего-то похожего на это, в котором у меня есть отдельная папка компонента, в которой у меня есть папка представлений.поэтому я импортировал компонент в мой index.js.посмотрите на приведенный ниже пример, я импортировал компонент администратора, под которым я добавил его дочерние элементы.Аналогично, вы можете добавить несколько дочерних элементов в другой компонент, и эти дочерние элементы будут загружаться только в их родительский компонент. 

{
 path: '/admin',
      component: AdminComponent,
      children: [
        {
          path: 'admin_dashboard',
          alias: '',
          component: AdminDashboard,
          name: 'admin_dashboard'
        },

Взгляните на структуру этой темы https://github.com/misterGF/CoPilot

...