1

Всем привет. Есть задача - организовать динамический роутинг на сайте (CPA интернет-магазин с ssr). На бекенде (Laravel) организована динамическая маршрутизация и все динамические маршруты лежат в таблице БД aliases. Например есть модели Product, Page, Category и у них есть связанная модель Alias (маршрут).

Route::middleware('alias')->group(function () {
    // Обработкой роутов будет заниматься главный контроллер
    Route::get('/{uri?}', 'SiteController@entry')->where(['uri' => '.*']);
});

Любой запрос почти по любому пути (кроме системных типа /admin/** /api/**) попадает на этот маршрут и middleware alias осуществляет поиск текущего uri в таблице aliases. Если не нашел - abort(404). Все норм работает, страницы, категории, товары создаются в админке. Таких динамических маршрутов, как вы понимаете, может быть достаточно много (на текущий момент уже более 10000), а по адресу /foo может быть как страница, так и категория (у магазина есть префикс /shop, но и тут может быть несколько вложенных категориий товаров /shop/cat1/cat2/product1 или товар без категории /shop/product2)

Вернемся к фронту. Сборщик - вебпак, используется vue-cli. package.json:

"dependencies": {
  "@fortawesome/fontawesome": "^1.1.6",
  "@fortawesome/fontawesome-free-regular": "^5.0.11",
  "@fortawesome/fontawesome-free-solid": "^5.0.11",
  "@fortawesome/vue-fontawesome": "0.0.22",
  "animate.css": "^3.6.1",
  "baron": "^3.0.3",
  "es6-promise": "^4.2.4",
  "jquery": "^3.3.1",
  "vue": "^2.5.16",
  "vue-notification": "^1.3.7",
  "vue-root-modals": "^0.1.1",
  "vue-router": "^3.0.1",
  "vue-server-renderer": "^2.5.16",
  "vuex": "^3.0.1",
  "vuex-router-sync": "^5.0.0"
}

Структура фронта

структура проекта

Загвоздка вот в чем. При инициализации vue-router в маршрут надо передавать компонент, который должен быть отображен по указанному пути

// * АБСТАКТНЫЙ ПРИМЕР
// ленивая загрузка путей
const Page = () => import("@/views/Page.vue")
const Product = () => import("@/views/Product.vue")

const router = new VueRouter({
   routes: [
     { path: '/page', component: Page }
   ]
})

А засада в том, что почти любой путь может иметь любой компонент (представление). И информация о том, какое представление имеет тот или иной путь находится в базе. Повторюсь - путей может быть бесчисленное множество и внедрять их все при серверном рендеринге не имеет смысла. Представьте себе массив routes с 10000 объектов маршрутов, в который будет указано представление.

Естественно, я подумал о том, чтобы при инициализации vue-router получал только 1 объект текущего пути с нужным представлением, а при переходе использовать хук роутера beforeEach для того, чтобы перед переходом загрузить данные ajax get запросом. Сервер при этом нам отдает json объект в формате

{
    "view" : "Page",
    "data" : "Данные для того или иного представления"
}

То есть в серверном контроллере есть разная обработка GET запросов. Обычный запрос - воздращает text/html отрендеренная страница с предзагруженными данными (SEO важен), ajax запрос - возвращает json объект, указанный выше.

При этом в хуке думал динамически добавлять к роутеру новые маршруты при переходе при помощи метода экземпляра роутера router.addRoutes(routes)

Код инициализации роутера

// @/router/index.js

import Vue from "vue";
import Router from "vue-router";

// фабрика инициализации асинхронных компонентов
const initViews = viewsList => {
    if(typeof viewsList === 'string'){
      return () => import(`@/views/${viewsList}.vue`);
    }
    let _views = {};
    viewsList.forEach(view => {
        if (!_views[view]) {
            _views[view] = () => import(`@/views/${view}.vue`);
        }
    });
    return _views;
};

let routes = [
  {
    path: window.location.pathname,
    component: initViews(window.__INITIAL_STATE__.currentView)
  }
];
// для ssr нам нужно создать фабрику-инициализатор роутера
export default () => {
    let router = new Router({
        mode: "history",
        fallback: false,
        routes
    });
    return { router, initViews };
};

Код хука beforeEach

// @/entry-client.js

// wait until router has resolved all async before hooks
// and async components...
router.onReady(() => {
    router.beforeEach((to, from, next) => {

      const matched = router.getMatchedComponents(to)

      if(!matched.length){
        // если у маршрута, куда осуществляется переход,
        // нет компонента
        // то делаем ajax GET запрос по требуемому пути
        // app.$GET() - это глобальный декоратор $.ajax
        // с нужными заголовками
        app.$GET(to.fullPath)
          .done((data, responseText, jqXHR) => {
            // добавляем к роутеру новый маршрут
            // с именем представления
            router.addRoutes([
                {
                  path: to.path,
                  // initViews - декоратор "() => import(`@/views/${name}.vue`)"
                  component: initViews(data.view)  
                }
            ]);
            // сохраним data.data в app.$store
            // ...

            // ну естественно продолжим обработку перехода
            next();
          })
          .fail(next);
      } else {
        // Если по этому пути уже были, 
        // то загружать больше ничего не надо
        next();
      }
    })
});

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

Документацию прочесал по всем вопросам, но видимо где-то не догоняю. Есть мысли, как заставить это работать? Буду признателен за любые мысли))

1 ответ 1

2

Короче, перечитал доку по сторожевым хукам vue-router и нашел важный момент по функции next()

В методе обработки данных с сервера, полученных ajax, нужно вместо next() вызвать next(to.path)

router.beforeEach((to, from, next) => {

  const matched = router.getMatchedComponents(to)

  if(!matched.length){
    app.$GET(to.fullPath)
    .done((data, responseText, jqXHR) => {

        router.addRoutes([
            {
              path: to.path,
              component: initViews(data.view)
            }
        ]);

        app.$store.commit('SET_VIEW_DATA', data.data)

        // ОБЯЗАТЕЛЬНО ОБНОВИТЬ ПЕРЕХОД, 
        // ЧТОБЫ РАЗРЕШИТЬ АСИНХРОННЫЙ КОМПОНЕНТ
        next(to.path);
    })
    .fail(next);
  } else {
    next();
  }
});

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

2
  • Спасибо! Очень крутое решение. Но у меня проблема. Если я перезагружаю страницу F5 то компонент не подгружается. Как вы это решили? 14 авг 2018 в 20:11
  • Не сталкивался с такой бедой, т.к. при первоначальной загрузке страницы нужный компонент резолвится в инициализации роутера
    – MaxKut
    15 авг 2018 в 7:01

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.