Массив сегментов роута в Nuxt

Бывает нужно обработать адрес с заранее неизвестным числом сегментов. Например, документация может лежать по пути /docs/a/b или /docs/guide/setup.

В Nuxt для этого имя параметра берут в квадратные скобки, а перед именем ставят троеточие. Файл [...slug].vue поймает все сегменты после /docs и положит их в массив.

Структура каталогов:

/app/
- /pages/
  - /docs/
    - [...slug].vue

Прочитаем массив через useRoute и выведем его на странице:

<script setup>
	const route = useRoute();
</script>
<template>
	<p>
		{{ route.params.slug }}
	</p>
</template>

Для адреса /docs/a/b в route.params.slug будет массив ['a', 'b']. Его можно соединить в строку или искать файл по частям.

Сделайте роут /files/..., который принимает любую глубину вложенности после /files.

Выведите на странице путь к файлу как строку, собранную из сегментов массива.

Сделайте роут /archive/... и покажите количество сегментов в адресе.