Шаблоны и страницы

views1432
Сложность:

Типовая структура Nuxt.js приложения предполагает наличие папок с шаблонами (Layouts) и страницами (Pages). По сути, всё это компоненты. Только это типовые компоненты, которые находятся на верхнем уровне. Уровень шаблона выше уровня страницы. Внутри шаблона можно выводить контент страниц. В странице можно указать шаблон, который будет использоваться.

Изначально есть только шаблон default. Соответственно, все страницы, где явно не указан layout используют именно его. Можно без проблем использовать только один шаблон даже в более или менее сложных приложениях, но удобнее их делить, если содержимое существенно отличается. Например, админка сайта и основной контент. В админке можно прямо в layout указать настройки доступа, чтобы не делать этого в каждой странице.

Также в layout удобно прописывать общие мета-теги и подключать общие скрипты и стили для определенных групп страниц. Тем не менее, я считаю, что чем меньше шаблонов используется, тем лучше.

Также внутри папки layots можно создать файл error.vue, который будет выполнять роль шаблона страницы ошибки.

Перейдём к страницам. В Nuxt.js используется файловых роутинг. Значит каждый vue файл внутри папки Pages является отдельной страницей на сайте. Внутренние папки являются вложенными путями в url. Например, если создать папку company, а в ней 2 файла index.vue и contacts.vue, то первый будет открываться по пути /company, а второй по пути /company/contacts.

Но пути могут быть не только статическими (с заранее заготовленными файлами), но и динамическими. Например, у нас есть папка page, а в ней файл _url.vue. Так мы сообщаем Наксту, что вместо _url будет подставляться динамический параметр. В самом запросе к бэкенду используем подставляемый url и бэкенд возвращает нам страницу, если находит документ с совпадением по полю url.

Можно использовать динамические страницы внутри папок с динамическими именами: /_category/_product.vue. Можно вообще отказаться от файлового роутинга. Можно лишь расширить его определенной функциональностью. Все эти случаи расписаны в инструкции к Nuxt.

При сборке приложения Nuxt разбивает бандл на чанки, учитывая файлы внутри папки Pages. То есть каждая отдельная страница = отдельный чанк. Можно дополнительно включить разбитие чанков и по шаблонам.

Автор: Александр Дергунов
Опубликовано: 3/27/2021