Как планировать маршруты для страницы с разделенными разделами

Question

Все:

У меня есть одностраничное приложение в Vue.js, и эта страница в основном разделена на левый и правый два раздела.Эти два раздела в настоящее время не имеют взаимодействия

Интересно, как мне спланировать маршруты (настроить маршрутизатор) для такого рода макета, чтобы каждый раздел мог управлять своим видом?

Answer 1

Вы определенно можете взглянуть на вложенную маршрутизацию. Вложенные маршруты VueRouter

Ваш родительский маршрут будет видом маршрутизатора для всей вашей оболочки / контейнера.Ваши дочерние маршруты будут обрабатывать соответствующие разделы.

Вы можете обернуть <router-view/> несколько раз в компонент в зависимости от требований или критериев вашего проекта

---

Пример концепциивыше:

Routes.js

/profile - Это сделает контейнер и упаковщик

/profile/resume - Предполагается, что резюме будет обработанов правой части столбца

Profile.vue

<div>
  <div class="column-1">Column 1</div>
  <div class="column-2>
    // Column 2
    <router-view/> // /profile/resume
  </div>
</div>

Затем оберните Profile.vue в ваш основной компонент, в основном App.vue

App.vue

<template>
  <router-view/>
</template>

---

* Названия используемых компонентов носят только рекомендательный характер.