Вложенная страница роута в Nuxt

Длинный адрес из вложенных папок можно показывать одним файлом страницы. Но иногда нужен другой вариант: общая обёртка для группы адресов и отдельное содержимое для каждого дочернего пути.

Если в app/pages есть файл catalog.vue и файл catalog/table.vue, Nuxt считает первый родителем, а второй - дочерней страницей. Родитель должен оставить в шаблоне место для ребёнка через NuxtPage.

Корневой app/app.vue по-прежнему содержит NuxtPage для всего приложения. Внутри него рисуется родитель, а уже в родителе - вложенный NuxtPage для дочернего файла.

Родительская страница каталога:

<template>
	<h1>
		Catalog
	</h1>
	<NuxtPage />
</template>

Дочерняя страница стола:

<template>
	<p>
		Table page.
	</p>
</template>

При адресе /catalog/table на экране будут и заголовок из catalog.vue, и текст из catalog/table.vue. Это отличается от случая, когда /catalog/table рисует только один файл без общей обёртки родителя.

Сделайте родительскую страницу аккаунта по адресу /account с заголовком на английском и NuxtPage в шаблоне.

Сделайте дочернюю страницу настроек по адресу /account/settings, которая выводится внутри родителя.