Я подумал о следующем гибриде MPA - SPA, где я в основном воспринимаю каждую страницу как SPA, но по-прежнему перезагружаю страницы для перехода с одной страницы на другую (index.blade.php в posts.blade.php), как обычно MPA. Этот метод использует мощные функции маршрутизации laravel, сеанса и аутентификации для рендеринга шаблона блейда, который содержит один компонент vue.js.
Представьте, что вы на главной странице, у вас будет что-то вроде этого:
@extends('layouts.master')
@section('content')
<body id="vue_root">
<page-index data={{ json encoded data from backend }}></page-index>
</body>
@endsection
Как видите, я передаю объект json в качестве компонента prop to vue, этот объект содержит все необходимые данные для визуализации vue.
При использовании этого подхода к обработке каждой страницы как компонента, я могу использовать отдельные файлы vue.js, чтобы содержать всю разметку, логику (методы и стиль компонента vue) в одном файле, что облегчит мне тестирование и отладки.
У меня есть один корневой экземпляр vue.js, где я регистрирую все компоненты страницы.
Однако, поскольку я использую контроллеры laravel в качестве бэкэнда для извлечения всех данных вместе с представлениями блейдов, мне также придется создавать компоненты vue.js и шаблоны блейдов laravel, что звучит для меня как двойная работа.
Что вы думаете об этом паттерне? это хорошо? любые идеи, чтобы улучшить это, я должен вместо этого использовать встроенные шаблоны (таким образом, мне не нужно было бы делать соответствующие шаблоны блейдов и компоненты страницы vue.js.