Всем привет.
Есть задача - организовать динамический роутинг на сайте (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();
}
})
});
Но компонент только добавленного маршрута не отображается. Причем, если при инициализации роутера нужные маршруты прописать, то навигация работает как надо, с использованием асинхронных компонентов, но вот при таком подходе не работает.
Документацию прочесал по всем вопросам, но видимо где-то не догоняю. Есть мысли, как заставить это работать? Буду признателен за любые мысли))