Настройка Vue Router для SPA на 1С-Битрикс
Личный кабинет пользователя, мультишаговый оформление заказа, фильтруемый каталог — ситуации, когда навигация внутри интерфейса не должна перезагружать страницу. Vue Router в связке с Битриксом требует аккуратной настройки: маршруты Vue не должны конфликтовать с URL-структурой Битрикса, а серверная часть должна корректно обрабатывать прямые переходы по SPA-ссылкам.
Режимы истории: hash vs history
Hash-режим (createWebHashHistory) — URL выглядит как /lk/#/orders. Плюс: не требует настройки сервера, Битрикс получает запрос к /lk/ и не видит хеш. Минус: некрасивые URL, плохо для SEO (хотя личный кабинет не индексируется).
History-режим (createWebHistory) — URL как /lk/orders/. Красивые URL, но сервер должен возвращать один и тот же HTML для всех SPA-маршрутов. В Битрикс это решается через urlrewrite.php или через .htaccess:
# .htaccess для SPA-раздела /lk/
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /lk/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^ /lk/ [L]
</IfModule>
В urlrewrite.php Битрикса добавляется правило, которое направляет все запросы внутри /lk/ на один PHP-файл — входную точку SPA. Этот файл монтирует Vue-приложение.
Структура маршрутов для личного кабинета
const routes = [
{
path: '/',
component: LkLayout,
children: [
{ path: '', redirect: 'orders' },
{ path: 'orders', component: OrdersList,
meta: { title: 'Мои заказы' } },
{ path: 'orders/:id', component: OrderDetail,
meta: { title: 'Заказ' } },
{ path: 'profile', component: ProfileEdit,
meta: { title: 'Профиль' } },
{ path: 'addresses', component: AddressList,
meta: { title: 'Адреса доставки' } },
]
},
{ path: '/:pathMatch(.*)*', component: NotFound }
];
const router = createRouter({
history: createWebHistory('/lk/'),
routes
});
base: '/lk/' в createWebHistory — чтобы Vue Router не путался с Битриксовыми URL выше по дереву.
Guards: проверка авторизации
router.beforeEach((to, from, next) => {
const userStore = useUserStore();
if (!userStore.isAuthorized) {
// Редирект на битриксовую страницу авторизации
window.location.href = '/auth/?backurl=' + encodeURIComponent(to.fullPath);
return;
}
next();
});
Битрикс управляет авторизацией на уровне PHP — если сессия истекла, контроллер вернёт 401, Vue-приложение поймает это в axios-интерцепторе и выполнит редирект.
Ленивая загрузка маршрутов
const OrderDetail = () => import('./pages/OrderDetail.vue');
Каждый роут — отдельный чанк. Vite разбивает сборку, страница деталей заказа загружается только при первом переходе. Для личного кабинета с 5-8 страницами это сокращает начальную загрузку.
Сохранение состояния между маршрутами
keep-alive для компонентов, которые не должны пересоздаваться при возврате — например, фильтры в списке заказов:
<RouterView v-slot="{ Component }">
<KeepAlive include="OrdersList">
<component :is="Component" />
</KeepAlive>
</RouterView>
При возврате к списку заказов — состояние фильтров и позиция скролла сохраняются. Данные обновляются через onActivated хук.
Интеграция с SEO-инструментами Битрикс
Для SPA-страниц, которые должны индексироваться (каталог с фильтрами), Vue Router работает в hash-режиме или используется Prerender.io / серверный пре-рендер. Для закрытых разделов (личный кабинет) — индексация не нужна, history-режим без ограничений.
Meta-теги страниц при навигации через Vue Router — через vue-meta или нативно:
router.afterEach((to) => {
document.title = to.meta.title + ' — Личный кабинет';
});
Типичный срок: настройка Vue Router для личного кабинета с 5-7 маршрутами, включая guards, ленивую загрузку и настройку сервера — 2-3 рабочих дня. Для сложных SPA с вложенными маршрутами и несколькими уровнями авторизации — 4-6 дней.