Как сделать отличающиеся шаблоны страниц в Angular или Vue?

Question

[Klein Maximus]

Часто бывает, что не все страницы на сайте соответствуют одному шаблону.
Например, здесь и здесь четко выделяется общий шаблон, который можно вынести в основной компонент приложения, и, зачастую, таких страниц на сайте большинство.
Но в то же время, бывают страницы, которые отличаются от основного шаблона, например, эта или эта, причем таких как отличий может быть много, так и схожих черт (тут и тут полоска футера одинаковая, например).

Понятно, что данный шаблон админки сайта приведен для примера и может быть несколько натянут, но все же проблема имеет место. Например, часто встречался с такими вопросами при разработке интернет-магазинов.

Как поступать в данном случае, если в качестве фреймворка используется Vue2 или Angular2+ (в т. ч. страница первоначально ренедерится на сервере под управлением Node)?

Я вижу 2 варианта:
1) Определять шаблон страницы в компонентах роутов.
Этот вариант мне не нравится тем, что при переходах даже между подобными страницами все равно будет происходить "полная перерисовка" все DOM, т. к. общий шаблон будет находиться внутри компонента, на который нас отправляет конкретный роут, а они все разные.

2) Показывать разные варианты шаблонов на основе значения, которое определяется через глобальную шину данных (глобальный сервис, vuex, экземпляр приложения и пр.).
Здесь "полная перерисовка" DOM будет происходить только при переходах между отличающимися страницами, но основной компонент приложения будет становиться все больше при увеличении числа отличающихся разделов. Да и всякими v-if/ngIf будет пестрить. Ну и сама идея использовать какой-то глобальный объект для хранения состояния мне не нравится.

Может быть кто-то может предложить более гибкое и красивое решение?

Answer 1

[Evgeny Kulakov]

На основе роутов вполне можно работать имхо.
Т.е. у вас есть шаблон, который имеет вид:

<div>
<common-element></common-element>
<router-view></router-view>
</div>

Соответственно все вложенные пути будут отрисовываться внутри родителя и только они будут перерисовываться.
Плюс вы можете даже в этом шаблоне мониторить текущий путь и показывать либо скрывать какие-то общие элементы или элементы, которые нужно отобразить только для конкретного маршрута или по какому-либо условию.

Comments

[Klein Maximus]

Если у страниц сайта нет общих элементов (как в моем примере у страниц админки и логина), то шаблон основного компонента будет содержат только <router-view></router-view> (или <router-outlet></router-outlet> в ангуляре).
Т. о., перерисовываться каждый раз будет вся страница :(

[Evgeny Kulakov]

Klein Maximus, вы можете условно отображать элементы:

<div>
<element-for-admin-only v-if="showOnlyPathMachedWithAdminPaths"></element-for-admin-only>
<router-view></router-view>
</div>

[Klein Maximus]

Evgeny Kulakov, т. е. все равно нужно showOnlyPathMachedWithAdminPaths передавать в родительский компонент. Как? Через объект приложения или vuex (или сервисы в angular)?

Опять же element-for-admin-only может быть несколько, т. е. придется менять шаблон компонента при необходимости добавления других шаблонов.

[Evgeny Kulakov]

Klein Maximus, зачем? просто следите за путем прямо в шаблоне:

watch: {
        $route() {
            this.showOnlyPathMachedWithAdminPaths = this.$route.matched.some(i => i.name === 'admin') 
        }
    },

[Klein Maximus]

Evgeny Kulakov, решение мне понравилось.
Только я решил не по имени роута проверку делать, а по параметру в блоке meta конкретного роута.
Так более гибко и декларативно.

[Evgeny Kulakov]

Klein Maximus, тоже норм вариант.

Answer 2

[Coder321]

Незаню как в vue но в angular можете создать себе несколько шаблонов которые будут родительскими роутами и внутри их уже создать дочерние.

Comments

[Klein Maximus]

Да, этот вариант я уже нашел.
Спасибо!

P.S.: На Vue тоже можно так сделать.

Answer 3

[Alexander]

Разные шаблоны со слотами.

https://ru.vuejs.org/v2/guide/components.html#%D0%...

Comments

[Klein Maximus]

Т. е. все равно полная перерисовка страницы?