Часто бывает, что не все страницы на сайте соответствуют одному шаблону.
Например,
здесь и
здесь четко выделяется общий шаблон, который можно вынести в основной компонент приложения, и, зачастую, таких страниц на сайте большинство.
Но в то же время, бывают страницы, которые отличаются от основного шаблона, например,
эта или
эта, причем таких как отличий может быть много, так и схожих черт (
тут и
тут полоска футера одинаковая, например).
Понятно, что данный шаблон админки сайта приведен для примера и может быть несколько натянут, но все же проблема имеет место. Например, часто встречался с такими вопросами при разработке интернет-магазинов.
Как поступать в данном случае, если в качестве фреймворка используется Vue2 или Angular2+ (в т. ч. страница первоначально ренедерится на сервере под управлением Node)?
Я вижу 2 варианта:
1) Определять шаблон страницы в компонентах роутов.
Этот вариант мне не нравится тем, что при переходах даже между подобными страницами все равно будет происходить "полная перерисовка" все DOM, т. к. общий шаблон будет находиться внутри компонента, на который нас отправляет конкретный роут, а они все разные.
2) Показывать разные варианты шаблонов на основе значения, которое определяется через глобальную шину данных (глобальный сервис, vuex, экземпляр приложения и пр.).
Здесь "полная перерисовка" DOM будет происходить только при переходах между отличающимися страницами, но основной компонент приложения будет становиться все больше при увеличении числа отличающихся разделов. Да и всякими v-if/ngIf будет пестрить. Ну и сама идея использовать какой-то глобальный объект для хранения состояния мне не нравится.
Может быть кто-то может предложить более гибкое и красивое решение? 
