Комментарии 7
Я конечно не специалист по Vuejs, больше по React, но общую суть уловил. Такая же модель шаблонов используется в ASP.NET приложениях с шаблонизатором Razor. В Razor у шаблона страницы можно указать родительский шаблон с помощью которого будет отрисована страница. Но если переносить вашу логику на шаблоны Razor, то название шаблона layout: "green-layout" будет указываться в файле page.vue. Мне кажется роутер не должен знать о том в каком виде нужно отрисовывать компонент. Задача роутера — роутить компоненты. Роутер должен знать, что нужно вывести такой то компонент, а как его вывести (с каким шаблоном) это уже пусть сам компонент решает.
А вообще система с layout в Razor мне не очень нравится. Часто нужно прокинуть кусок кода в родительский компонент и тут начинаются танцы с бубном из кучи блоков прокидывания этого самого кода.
Поэтому для меня более предпочтительная модель построения страниц на React
/// router
<Router>
<Route>
<ComponentPage1>
/// сomponentPage1
<RootView layout="green">
<PageView>
</RootView>Где <RootView> это по сути ваш корневой layout, только прокидывание свойст получается как бы сверху, а не снизу. В случае с Razor прокидывание получается снизу на верх.
Если шаблоны отличаются только цветом шапки — не спорю. Но я этот механизм использую, если шаблоны имеют разную структуру. Например: главная страница — классические шапка и подвал, личный кабинет — готовый шаблон из компонентов vuetify, аутентификация и регистрация — чистый шаблон, на котором только ссылка на главную страницу.
Согласен, но суть данного поста показать сам принцип смены layout'ов, а на каком примере уже второе дело
//page 1
<template>
<LayoutGreen>
<h1>Зеленый шаблон</h1>
</LayoutGreen>
</template>
//page 2
<template>
<LayoutBlue>
<h1>Синий шаблон</h1>
</LayoutBlue>
</template>То, что страница знает свой layout, а не роуты, как мне кажется, более логично.
Этот пример оказался более понятным чем видео на ютубе по этой теме.
Переключение шаблона страниц во vuejs