Как добавить Шапку и Подвал в Nuxt 3

Шапка (Header) и Подвал (Footer) подобны подставкам для книг на веб-странице — они красиво обрамляют все и сохраняют целостность. В Nuxt 3 Шапку и Подвал можно легко создать, используя особый способ создания вещей, называемых «компонентами».

Также мы исправим ошибку, когда вы могли видеть, что после перехода между страницами футер «прыгает».

#Понимание компонентной архитектуры Nuxt 3

Nuxt 3 — это разбиение вещей на более мелкие части, называемые «компонентами». Это немного похоже на сборку из LEGO: вы создаете разные детали и соединяете их вместе, чтобы получилось что-то крутое. Верхние и нижние колонтитулы похожи на специальные кубики Lego, которые можно использовать снова и снова.

#Использование Header и Footer компонентов

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

#Создание макета по умолчанию

В моем приложении мне не нужны разные макеты. У меня будет только один под названием default.vue. Итак, создайте папку макетов в корневом каталоге вашего проекта и создайте файл default.vue. В этом файле у нас будет этот фрагмент кода:

<template>
	<div>
		<slot />
	</div>
</template>

Как только мы закончили с макетом, нам нужно сделать его видимым на странице — добавьте макет в файл app.vue следующим образом:

<template>
	<NuxtLayout>
		<Header />
		<NuxtPage />
		<Footer />
	</NuxtLayout>
</template>

#Поиск неисправностей

Если вы вставляете приведенный выше код в свой проект и Футер «перепрыгивает» в верхнюю часть страницы при переходе между страницами, это потому, что нам нужно сделать нашу страницу уникальным узлом. Для этого нам нужно поместить наш <NuxtPage /> в div.

<template>
	<NuxtLayout>
		<Header />
		+ <div>
			<NuxtPage />
		+ </div>
		<Footer />
	</NuxtLayout>
</template>

Теперь этот эффект сбоя должен исчезнуть.

#Заключение

Хэдер и Футер могут показаться мелочами, но они очень важны для того, чтобы веб-сайт выглядел правильно. С Nuxt 3 можно легко создавать эти детали и использовать их снова и снова.