Налаштування Vue Router для SPA на 1С-Бітрікс

Налаштування 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 днів.