Режим Memory (абстрактный)

Vue Router предоставляет мощный механизм управления маршрутами в приложениях на Vue.js. Один из ключевых аспектов его работы — это режимы истории, которые определяют, как изменения URL обрабатываются и отображаются. Помимо стандартных режимов hash и history, существует абстрактный режим, часто называемый Memory mode, который не зависит от браузерного API истории и URL.

Абстрактный режим: назначение и особенности

Режим Memory используется преимущественно в средах, где нет стандартного объекта window или history, например:

  • Серверные рендереры (SSR)
  • Тестовые среды
  • Node.js-приложения без браузера
  • Изолированные компоненты, требующие симуляции маршрутов

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

Инициализация маршрутизатора в абстрактном режиме

Для создания маршрутизатора в Memory mode используется свойство history при конфигурации createRouter:

import { createRouter, createMemoryHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createMemoryHistory(),
  routes
})

export default router
  • createMemoryHistory() создает внутреннюю историю, независимую от браузера.
  • Все переходы (router.push, router.replace) обновляют только внутреннее состояние, не изменяя адресную строку.

Управление переходами

Абстрактный режим поддерживает стандартные методы маршрутизатора:

  • router.push(location) — добавление нового маршрута в стек памяти.
  • router.replace(location) — замена текущего маршрута.
  • router.back() / router.forward() — навигация по стеку памяти аналогично браузерным кнопкам.

Пример:

router.push('/about')   // Перейти на маршрут /about
router.back()           // Вернуться на предыдущий маршрут

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

Особенности работы с компонентами

Компоненты, используемые с Memory mode, не зависят от URL и могут быть динамически изменены через реактивные свойства маршрутизатора:

import { ref, watch } from 'vue'

const currentRoute = ref(router.currentRoute.value)

watch(router.currentRoute, (newRoute) => {
  currentRoute.value = newRoute
})
  • router.currentRoute всегда актуален, независимо от внешнего браузера.
  • Можно создавать имитацию навигации без фактического изменения адресной строки.

Использование в тестировании

Абстрактный режим идеально подходит для модульных и интеграционных тестов:

  1. Изоляция от браузера — отсутствие зависимости от DOM.
  2. Контроль над историей — возможность проверять стек маршрутов.
  3. Предсказуемость — навигация полностью управляется кодом теста.

Пример с Jest:

import { mount } from '@vue/test-utils'
import { createRouter, createMemoryHistory } from 'vue-router'
import App from './App.vue'
import Home from './views/Home.vue'
import About from './views/About.vue'

const router = createRouter({
  history: createMemoryHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

test('переход на маршрут /about', async () => {
  const wrapper = mount(App, {
    global: { plugins: [router] }
  })

  await router.push('/about')
  expect(wrapper.html()).toContain('About')
})

Ограничения абстрактного режима

  • Нет обновления адресной строки браузера.
  • Ограниченные возможности SEO при использовании в клиентской части.
  • Не подходит для прямого взаимодействия с пользователем через URL.

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

Интеграция с Vue Router API

Memory mode поддерживает все ключевые события и хуки маршрутизатора:

  • beforeEach и afterEach работают как обычно.
  • beforeResolve сохраняет совместимость с асинхронной загрузкой компонентов.
  • isReady() гарантирует корректное завершение инициализации маршрутизатора перед рендерингом.

Пример с хуками:

router.beforeEach((to, from, next) => {
  if (to.path === '/about') {
    console.log('Переход на About')
  }
  next()
})

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

Memory mode в Vue Router обеспечивает абсолютно контролируемую, программную навигацию в приложениях, где URL браузера недоступен или нежелателен, сохраняя при этом полный функционал маршрутизатора.

Оглавление