Как в Nuxt 3 использовать одну страницу для разных роутов?

Question

[vladimirir]

Возникла необходимость перевода сайта с Vue 2 на Nuxt 3 . На сайте есть страница "Города", на которой есть меню со списком городов, при клике на один из которых отображается инфа по соответствующему городу. Страница остаётся та же, меняется только картинка и инфа (ну и выбранный город в меню подсвечивается). На Vue 2 это было реализовано через прописывание в файле роутера того, что и за роут cities и за cities/:city/ отвечал один и тот же компонент (в компоненте соответствующая логика). На Nuxt 3 пытаюсь использовать примеры из документации https://nuxt.com/docs/guide/going-further/custom-r... . Пробую через файл app/router.options.ts , в результате выдаёт всё равно 404-ю ошибку на адрес вида cities/city_name . В app/router.options.ts прописываю

{
            name: 'cities',
            path: '/cities',
            component: () => import('~/pages/cities.vue').then(r => r.default || r)
        },
        {
            name: 'cities-id',
            path: '/cities/[id]/',
            component: () => import('~/pages/cities.vue').then(r => r.default || r)
        },

Пробовал так же через Pages Hook https://nuxt.com/docs/guide/going-further/custom-r... , там тоже не срабатывает. В nuxt.config.ts прописываю:

hooks: {
    'pages:extend' (pages) {
      pages.push({
        name: 'cities-id',
        path: '/cities/[id]',
        file: '~/pages/cities.vue'
      })
    }
  }

При билде выдаёт ошибку no such file or directory, open '~/pages/cities.vue'

Кто-нибудь знает, как лучше поступить в данной ситуации (когда требуется несколько разных роутов вести на одну страницу, которая по сути является для них родительской страницей)? Не хочется дублировать код просто

Answer 1

[Андрей]

Динамические параметры во vue-router обозначаются через :

export default defineNuxtConfig({
  hooks: {
    "pages:extend"(pages) {
      pages.push({
        name: "cities-id",
        path: "/cities/:id",
        file: "~/pages/cities.vue",
      });
    },
  },
});

Пример

Comments

[vladimirir]

Спасибо большое! Помогло