Ссылка на страницу в Nuxt

Страницы в app/pages уже открываются, если ввести путь в адресной строке. На самом сайте удобнее давать переходы кликабельными элементами в разметке. Для внутренних адресов Nuxt подключает компонент NuxtLink: он создаёт ссылку, которая понимает маршруты приложения.

Давайте познакомимся с ним на главной странице. Целевой путь задают пропом to - строкой с адресом внутри сайта, начиная со слэша. Перейдём на страницу «О нас» по пути /about:

<template>
	<p>
		Welcome to our site.
	</p>
	<NuxtLink to="/about">
		About
	</NuxtLink>
</template>

Компонент NuxtLink импортировать не нужно: Nuxt подставляет его автоматически, как и другие частые API фреймворка. В браузере ссылка выглядит обычной, но при клике по внутреннему адресу не происходит полной перезагрузки вкладки.

Приложение остаётся запущенным: тот же экземпляр Vue, тот же корневой app.vue и макет, если он подключён. Меняется только содержимое NuxtPage - подставляется файл страницы, который соответствует новому пути. Так переходы ощущаются быстрее, а общая оболочка сайта не мигает.

Если бы здесь стоял тег a с тем же /about, браузер запросил бы документ заново. Для чужих доменов это нормально, но для своих страниц NuxtLink - правильный выбор.

Файл app/pages/about.vue с текстом на английском должен существовать. После клика адрес в строке сменится на /about, а вкладка не перезагрузится целиком.

На одной из страниц сайта сделайте переход по адресу /delivery.