Вложенные маршруты

Вложенные маршруты нужны, когда у группы страниц общая часть: раздел управления блогом со своим меню, внутри которого меняются «Все статьи» и «Новая статья». Родительский маршрут выводит макет, а дочерние — содержимое внутри него.

Макет раздела

Создайте src/views/AdminLayout.vue. В нём свой RouterView — сюда попадут дочерние страницы:

<!-- src/views/AdminLayout.vue -->
<template>
  <section class="admin">
    <h1>Управление блогом</h1>
    <nav>
      <RouterLink :to="{ name: 'admin-posts' }">Все статьи</RouterLink> |
      <RouterLink :to="{ name: 'admin-new-post' }">Новая статья</RouterLink>
    </nav>
    <RouterView />
  </section>
</template>

И две простые страницы:

<!-- src/views/AdminPostsView.vue -->
<template>
  <h2>Все статьи</h2>
  <p>Здесь будет таблица статей.</p>
</template>

<!-- src/views/NewPostView.vue -->
<template>
  <h2>Новая статья</h2>
  <p>Здесь будет форма.</p>
</template>

Дочерние маршруты

Дочерние маршруты перечисляют в поле children. Их адреса пишут без начальной косой черты — они дописываются к адресу родителя:

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
 
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    { path: '/', name: 'home', component: HomeView },
    { path: '/about', name: 'about', component: () => import('../views/AboutView.vue') },
    { path: '/posts/:id', name: 'post', component: () => import('../views/PostView.vue') },
    {
      path: '/admin',
      component: () => import('../views/AdminLayout.vue'),
      children: [
        { path: '', name: 'admin-posts', component: () => import('../views/AdminPostsView.vue') },
        { path: 'new', name: 'admin-new-post', component: () => import('../views/NewPostView.vue') },
      ],
    },
    { path: '/:pathMatch(.*)*', name: 'not-found', component: () => import('../views/NotFoundView.vue') },
  ],
})
 
export default router

Откройте http://localhost:5173/admin — появятся заголовок «Управление блогом», меню и «Все статьи». По адресу /admin/new макет останется, а внутри сменится содержимое на «Новая статья».

Адрес	Что выводится
`/admin`	`AdminLayout` и внутри `AdminPostsView`
`/admin/new`	`AdminLayout` и внутри `NewPostView`
`/что-угодно`	`NotFoundView`

Ленивая загрузка

Запись component: () => import('...') загружает код страницы только при первом переходе на неё. При сборке каждая такая страница попадает в отдельный файл, и главная открывается быстрее. Страницу, которую видят все, — главную — обычно импортируют сразу.

Страница 404

Последний маршрут с адресом /:pathMatch(.*)* совпадает с любым адресом, для которого не нашлось другого маршрута. Создайте для него src/views/NotFoundView.vue:

<!-- src/views/NotFoundView.vue -->
<template>
  <h1>Страница не найдена</h1>
  <RouterLink to="/">На главную</RouterLink>
</template>

Адрес http://localhost:5173/abc покажет «Страница не найдена».

Частая ошибка

Забыть RouterView в макете родителя. Адрес /admin/new откроется без ошибок, но покажет только заголовок и меню — дочерней странице некуда вывестись. У каждого уровня вложенности должен быть свой RouterView.

Спасибо, что читаете!