Содержание

1. Директория pages и система роутинга

Директория pages и система роутинга

Следующая очень важная папка, которая есть у нас, — это папка pages, которая отвечает за систему роутинга в нашем проекте. То есть pages — это страницы нашего приложения, которые будут открываться при обращении к каким-то роутам по определённым адресам. Каждый файл в этой директории представляет собой отдельный роут, который будет выводить какое-то содержимое.

Главный файл index.vue

Главным файлом является файл index.vue, который мы можем с вами создать. По сути, страницы, которые есть у нас, являются обычными Vue-компонентами. Давайте это с вами сделаем.

Для начала нам нужно создать директорию pages, и в этой директории главным файлом, который будет доступен для главной страницы, будет являться файл index.vue. Допустим, мы создадим в нём страницу с заголовком "Главная страница". Но если мы сейчас посмотрим, то получим ошибку 500.

Дело в том, что для того чтобы всё начало работать, и чтобы компоненты системы роутинга начали функционировать, мы должны в нашем главном файле вывести компонент NuxtPage. Теперь, как вы видите, у нас отображается главная страница, которую мы можем использовать. Благодаря этому компоненту у нас подключилась система роутинга, и теперь файлы, которые находятся в pages, будут доступны по указанным путям.

Автоматическое подключение компонентов

Если я добавлю тестовый компонент, то он тоже автоматически подключится, и нам не нужно будет использовать конструкцию import, чтобы использовать этот компонент внутри главного компонента. Например, если я создам страницу test и пропишу, что это тестовая страница, то при переходе на роут /test у меня будет отображаться тестовая страница.

Структура роутинга

Система роутинга автоматически создаёт маршруты и нам не нужно прописывать их вручную в конфигурационных файлах. Структура роутинга нашего проекта формируется исходя из файлов, которые находятся в директории pages. Например, если мы создадим директорию parent и переместим в неё наш тестовый компонент, то доступ к этой странице будет осуществляться по пути /parent/test.

Таким образом, директория указывает на разделы, а имена файлов — это имена компонентов, к которым мы получаем доступ.