Плавная смена контента

Navigo — это легковесная библиотека для маршрутизации на стороне клиента в JavaScript, которая позволяет реализовать SPA (Single Page Application) без необходимости перегрузки страницы. Она обеспечивает управление URL, обработку параметров маршрута и упрощает динамическую смену контента. Основной объект Navigo создаётся с указанием базового пути и опций:

const router = new Navigo('/', { hash: true });
  • / — базовый путь приложения.
  • hash: true — использование хэш-маршрутов (#) для совместимости с серверной структурой URL.

Методы on и navigate позволяют связывать маршруты с обработчиками и программно переключать состояние страницы.

Определение маршрутов и обработка контента

Маршруты в Navigo задаются методом on, который принимает путь и функцию-обработчик:

router.on('/home', () => {
    document.querySelector('#app').innerHTML = '<h1>Главная</h1><p>Добро пожаловать!</p>';
});

router.on('/about', () => {
    document.querySelector('#app').innerHTML = '<h1>О нас</h1><p>Информация о компании.</p>';
});

Ключевые особенности:

  • Поддержка динамических параметров:
router.on('/user/:id', (params) => {
    document.querySelector('#app').innerHTML = `<h1>Пользователь ${params.id}</h1>`;
});

Здесь :id автоматически попадает в объект params, что упрощает работу с динамическим контентом.

  • Возможность обработки нескольких маршрутов одной функцией через массив:
router.on(['/home', '/dashboard'], () => {
    document.querySelector('#app').innerHTML = '<h1>Добро пожаловать!</h1>';
});

Плавная смена контента через методы Navigo

Для реализации плавной смены контента используются техники динамической подгрузки и анимации DOM. Основная стратегия — заменить содержимое контейнера с помощью innerHTML или через создание и удаление узлов, интегрируя CSS-анимацию.

Пример с анимацией появления:

function renderContent(html) {
    const app = document.querySelector('#app');
    app.classList.add('fade-out');

    setTimeout(() => {
        app.innerHTML = html;
        app.classList.remove('fade-out');
        app.classList.add('fade-in');
    }, 300);
}

// CSS для плавного эффекта
// .fade-in { opacity: 1; transition: opacity 0.3s ease-in; }
// .fade-out { opacity: 0; transition: opacity 0.3s ease-out; }

Использование с маршрутом:

router.on('/services', () => {
    renderContent('<h1>Наши услуги</h1><p>Описание услуг.</p>');
});

Метод navigate позволяет программно переключать маршрут без перезагрузки страницы:

document.querySelector('#go-about').addEventListener('click', () => {
    router.navigate('/about');
});

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

Navigo поддерживает вложенные маршруты и параметры query:

router.on('/products/:category/:id', (params, query) => {
    renderContent(`<h1>${params.category}</h1><p>Продукт ID: ${params.id}</p>`);
});
  • params — объект с динамическими сегментами маршрута.
  • query — объект с GET-параметрами (например, /products/electronics/42?ref=homepage).

Для группировки маршрутов используется метод on с объектом:

router.on({
    '/contact': () => renderContent('<h1>Контакты</h1>'),
    '/faq': () => renderContent('<h1>Вопросы и ответы</h1>')
});

Настройка переходов и обратная навигация

Navigo позволяет контролировать переходы через события before и after. Это полезно для анимации и проверки прав доступа:

router.hooks({
    before: (done, params) => {
        console.log('Переход на маршрут:', params);
        done(); // продолжить навигацию
    },
    after: (params) => {
        console.log('Маршрут загружен:', params);
    }
});

Lazy-loading контента и модулей

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

router.on('/blog', async () => {
    const module = await import('./blog.js');
    renderContent(module.renderBlog());
});

Это позволяет уменьшить первоначальный размер скриптов и ускоряет старт приложения.

Управление ссылками и историей браузера

Чтобы обеспечить плавные переходы по внутренним ссылкам без перезагрузки страницы, нужно использовать обработчик кликов:

document.addEventListener('click', (e) => {
    if (e.target.matches('a[data-link]')) {
        e.preventDefault();
        router.navigate(e.target.getAttribute('href'));
    }
});

HTML-ссылки должны содержать атрибут data-link для идентификации:

<a href="/home" data-link>Главная</a>
<a href="/about" data-link>О нас</a>

Поддержка маршрутов по умолчанию и ошибки

Для обработки неизвестных маршрутов используется метод notFound:

router.notFound(() => {
    renderContent('<h1>404</h1><p>Страница не найдена</p>');
});

Маршрут по умолчанию можно задать через / или navigate('/') для редиректа.

Итоговая структура SPA с плавной сменой контента

  1. Инициализация Navigo с базовым путём.
  2. Определение маршрутов через on с функцией для рендера контента.
  3. Добавление анимаций при смене контента.
  4. Использование navigate и обработчиков ссылок для SPA-навигации.
  5. Поддержка динамических параметров, вложенных маршрутов и lazy-loading.
  6. Настройка событий before и after для контроля переходов.
  7. Обработка 404 и маршрутов по умолчанию.

Такой подход позволяет создавать интерактивные, отзывчивые приложения с плавной сменой контента без перезагрузки страницы, используя возможности Navigo и современные стандарты JavaScript.

Оглавление