Что такое вложенные маршруты?

Вложенные маршруты (или подмаршруты) — это маршруты в приложении Vue, которые определяются в контексте другого маршрута. Это позволяет создавать более структурированные и иерархические URL, которые соответствуют структуре вашего приложения.

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

Пример структуры маршрутов

Рассмотрим базовый пример с вложенными маршрутами.

// router/index.js
import Vue from 'vue';
import Router from 'vue-router';
import Blog from '@/components/Blog.vue';
import Post from '@/components/Post.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/blog',
      component: Blog,
      children: [
        {
          path: ':postId', // Вложенный маршрут для поста
          component: Post,
          name: 'post'
        }
      ]
    }
  ]
});

В этом примере у нас есть основной маршрут /blog, который отвечает за отображение компонента Blog. Внутри этого маршрута мы определяем вложенный маршрут :postId, который будет отображать компонент Post для каждого отдельного поста.

Как это работает?

Когда пользователь переходит по адресу, например, /blog/123, Vue Router будет:

Важные моменты

<!-- components/Blog.vue -->
<template>
  <div>
    <h1>Блог</h1>
    <router-view></router-view>  <!-- Здесь будут отображаться посты -->
  </div>
</template>

<script>
export default {
  name: 'Blog'
}
</script>

Заключение

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