Прежде всего, я настоятельно рекомендую не использовать один SPA на страницу.Я на самом деле работал в проекте, который использовал этот подход, и это было кошмаром для разработчиков внешнего интерфейса, чтобы поддерживать в долгосрочной перспективе.Есть два способа, которыми вы можете и должны использовать vue, и подход «мини-SPA» является худшим из обоих миров.
Вы можете либо
Использовать vue только для рендерингаОтдельные компоненты для интерактивности и позволяют вашей серверной среде выполнять остальную часть рендеринга и сбора данных и передавать эти данные через привязки статических свойств к используемым компонентам.
Или используйте vue в качестве SPA, который асинхронно взаимодействует с бэкэнд API.В любом из этих случаев у вас есть четкое разделение проблем, которые вы потеряете при выполнении «мини SPA».
Если вы все еще решили это сделать: в значительной степени единственный способ - это то, что вы уже упомянули, когда ваш бэкэнд-контроллер возвращает один составной компонент vue, который отображает остальную часть страницы и использует асинхронные вызовы для заполнения себя данными.Позвольте мне повторить это еще раз: это будет кошмар, когда дело доходит до управления состоянием и ремонтопригодности.
На мой взгляд, самый чистый путь - это отдельный фронтенд в vue SPA с vuex как управление состоянием и бэкэнд в HTTP (REST) API.