Как вложить навигацию внутри другой навигации, чтобы не перегружался главный route-view?

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

Для начала вам нужно создать основной компонент, который будет содержать вашу главную навигацию и точку входа для вложенных маршрутов. Допустим, его название - App.vue. Внутри этого компонента вы будете использовать элемент <router-view></router-view> для отображения содержимого текущего маршрута.

Пример кода для App.vue:

<template>
  <div>
    <nav>
      <!-- Основная навигация -->
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
  // остальной код компонента
}
</script>

Затем вы должны настроить ваши маршруты. Для примера предположим, что у вас есть два вложенных маршрута: /inner и /inner/sub. Конфигурирование маршрутов можно выполнить в файле router.js.

Пример кода для router.js:

import Vue from "vue";
import Router from "vue-router";

import App from "./App.vue";
import Inner from "./Inner.vue";
import SubInner from "./SubInner.vue";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/",
      component: App,
      children: [
        {
          path: "inner",
          component: Inner,
          children: [
            // Маршруты для вложенной навигации
            {
              path: "sub",
              component: SubInner
            }
          ]
        }
      ]
    }
  ]
});

Вышеприведенный код настраивает корневой маршрут /, который использует компонент App и имеет дочерний маршрут /inner, который использует компонент Inner. Inner компонент в свою очередь имеет дочерний маршрут /inner/sub, который использует компонент SubInner.

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

Например, в Inner.vue:

<template>
  <div>
    <h2>Вложенная навигация</h2>
    <nav>
      <!-- Код вложенной навигации -->
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Inner",
  // остальной код компонента
}
</script>

В SubInner.vue вы можете добавить свою вложенную навигацию:

<template>
  <div>
    <h3>Подвложенная навигация</h3>
    <nav>
      <!-- Код подвложенной навигации -->
    </nav>
  </div>
</template>

<script>
export default {
  name: "SubInner",
  // остальной код компонента
}
</script>

Теперь, когда пользователь переходит на /inner, будет отображен компонент Inner в главной навигации в App.vue. А когда пользователь переходит на /inner/sub, будет отображен компонент SubInner во вложенной навигации внутри Inner.vue, без перезагрузки основного route-view.

Надеюсь, данный подробный ответ помог вам разобраться в решении вашей задачи! Если у вас возникнут дополнительные вопросы, пожалуйста, не стесняйтесь задавать их!