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

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

Основы вложенных маршрутов

В Slim.js маршруты определяются с помощью метода route объекта Router. Вложенные маршруты создаются путем регистрации дочерних маршрутов внутри родительского. Родительский маршрут может задавать базовый путь и общую логику отображения, а дочерние маршруты уточняют путь и добавляют специфический функционал.

Пример базовой структуры:

import { Router } from 'slim-js';

const router = new Router();

router.route('/users', {
  onEnter: () => console.log('Вход в раздел пользователей'),
  children: [
    {
      path: '/:id',
      onEnter: (params) => console.log(`Просмотр пользователя ${params.id}`)
    },
    {
      path: '/:id/edit',
      onEnter: (params) => console.log(`Редактирование пользователя ${params.id}`)
    }
  ]
});

router.start();

Здесь /users — родительский маршрут, а /:id и /:id/edit — дочерние. params автоматически передает значения динамических сегментов пути.

Параметры маршрутов

Вложенные маршруты могут содержать динамические параметры, которые доступны через объект params. Это позволяет создавать гибкую навигацию без дублирования кода.

Пример обработки параметров:

router.route('/projects', {
  children: [
    {
      path: '/:projectId',
      onEnter: (params) => {
        console.log(`Проект: ${params.projectId}`);
      },
      children: [
        {
          path: '/tasks/:taskId',
          onEnter: (params) => {
            console.log(`Задача: ${params.taskId} в проекте ${params.projectId}`);
          }
        }
      ]
    }
  ]
});

В этом примере вложенные маршруты позволяют одновременно работать с параметрами родительского и дочернего маршрута.

Ленивая загрузка компонентов

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

Пример:

router.route('/dashboard', {
  onEnter: () => console.log('Главная панель'),
  children: [
    {
      path: '/analytics',
      lazy: () => import('./analyticsComponent.js'),
      onEnter: (component) => {
        component.render();
      }
    },
    {
      path: '/settings',
      lazy: () => import('./settingsComponent.js'),
      onEnter: (component) => {
        component.render();
      }
    }
  ]
});

Ключевое преимущество — экономия ресурсов при работе с крупными приложениями и модульное построение интерфейса.

Навигация и управление состоянием

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

Пример:

router.route('/catalog', {
  onEnter: () => loadCatalog(),
  children: [
    {
      path: '/category/:categoryId',
      onEnter: (params) => loadCategory(params.categoryId),
      children: [
        {
          path: '/item/:itemId',
          onEnter: (params) => loadItem(params.itemId)
        }
      ]
    }
  ]
});

При такой организации при переходе к конкретному товару (/catalog/category/5/item/42) Slim.js сохраняет контекст категории и каталога.

Обработка ошибок и fallback-маршруты

Для вложенных маршрутов важно предусматривать обработку несуществующих дочерних путей. Slim.js позволяет задать маршрут по умолчанию с использованием * или notFound.

Пример:

router.route('/blog', {
  children: [
    {
      path: '/:postId',
      onEnter: (params) => loadPost(params.postId)
    },
    {
      path: '*',
      onEnter: () => showNotFound()
    }
  ]
});

Любой путь, не соответствующий /blog/:postId, будет перенаправлен на функцию showNotFound, что обеспечивает устойчивость приложения.

Рекомендации по построению вложенных маршрутов

  • Четкая иерархия: Родительский маршрут должен задавать общий контекст, а дочерние — конкретные действия.
  • Переиспользуемость компонентов: Компоненты родителя можно использовать повторно в разных дочерних маршрутах.
  • Избегать слишком глубокой вложенности: Обычно 2–3 уровня достаточно для большинства интерфейсов.
  • Использование ленивой загрузки: Уменьшает время инициализации приложения и повышает отзывчивость.
  • Обработка fallback-маршрутов: Обеспечивает корректную работу при вводе неправильного URL.

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

Оглавление