Необязательный параметр роута в Nuxt

Иногда один и тот же файл страницы должен открываться и по короткому адресу, и по адресу с дополнительным сегментом. Например, список постов по /posts и один пост по /posts/5.

В Nuxt необязательный сегмент задают двойными квадратными скобками в имени файла. Файл [[id]].vue лежит в папке posts:

/app/
- /pages/
  - /posts/
    - [[id]].vue

Такой файл обрабатывает и /posts, и /posts/5. Когда id в адресе нет, поле route.params.id будет пустым.

Давайте выведем id, если он передан, и общий текст для списка:

<script setup>
	const route = useRoute();
</script>
<template>
	<p v-if="route.params.id">
		post {{ route.params.id }}
	</p>
	<p v-else>
		all posts
	</p>
</template>

Введём /posts - увидим текст про все посты. Затем /posts/5 - появится номер поста.

Сделайте роут для /goods и /goods/:name с выводом названия товара, когда сегмент передан.

Сделайте необязательный параметр категории: страница должна открываться по /catalog и по /catalog/:category.