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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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