Содержание
Директория pages
и система роутинга
Следующая очень важная папка, которая есть у нас, — это папка pages
, которая отвечает за систему роутинга в нашем проекте. То есть pages
— это страницы нашего приложения, которые будут открываться при обращении к каким-то роутам по определённым адресам. Каждый файл в этой директории представляет собой отдельный роут, который будет выводить какое-то содержимое.
Главный файл index.vue
Главным файлом является файл index.vue
, который мы можем с вами создать. По сути, страницы, которые есть у нас, являются обычными Vue-компонентами. Давайте это с вами сделаем.
Для начала нам нужно создать директорию pages
, и в этой директории главным файлом, который будет доступен для главной страницы, будет являться файл index.vue
. Допустим, мы создадим в нём страницу с заголовком "Главная страница". Но если мы сейчас посмотрим, то получим ошибку 500.
Дело в том, что для того чтобы всё начало работать, и чтобы компоненты системы роутинга начали функционировать, мы должны в нашем главном файле вывести компонент NuxtPage
. Теперь, как вы видите, у нас отображается главная страница, которую мы можем использовать. Благодаря этому компоненту у нас подключилась система роутинга, и теперь файлы, которые находятся в pages
, будут доступны по указанным путям.
Автоматическое подключение компонентов
Если я добавлю тестовый компонент, то он тоже автоматически подключится, и нам не нужно будет использовать конструкцию import
, чтобы использовать этот компонент внутри главного компонента. Например, если я создам страницу test
и пропишу, что это тестовая страница, то при переходе на роут /test
у меня будет отображаться тестовая страница.
Структура роутинга
Система роутинга автоматически создаёт маршруты и нам не нужно прописывать их вручную в конфигурационных файлах. Структура роутинга нашего проекта формируется исходя из файлов, которые находятся в директории pages
. Например, если мы создадим директорию parent
и переместим в неё наш тестовый компонент, то доступ к этой странице будет осуществляться по пути /parent/test
.
Таким образом, директория указывает на разделы, а имена файлов — это имена компонентов, к которым мы получаем доступ.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Email - зарегистрироваться / войти