Введение в роутинг в Nuxt

Любой сайт состоит из страниц, и у каждой страницы есть свой адрес в браузере. Пользователь переходит по этим адресам, а фреймворк решает, какой контент показать. Эту связь между URL и страницами называют роутингом.

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

Страницы приложения лежат в каталоге app/pages. Каждый файл с расширением .vue в этой папке становится отдельной страницей сайта. Имя файла и вложенные папки задают сегменты URL, которые пользователь вводит в адресную строку.

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

Чтобы увидеть результат, мы будем запускать проект в режиме разработки и вводить нужный путь прямо в браузере. Если для адреса найден файл в app/pages, Nuxt отрисует его как обычный компонент Vue.

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