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

В Nuxt 3 есть несколько способов использования одной страницы для разных маршрутов, в зависимости от ваших конкретных потребностей и предпочтений. Вот некоторые из них:

1. Динамические параметры:
Вы можете использовать динамические параметры в вашем файле pages/_id.vue для создания динамических маршрутов. Например, если вы создали файл _id.vue в pages директории, то Nuxt будет автоматически создавать маршруты с использованием значений id в качестве параметра. Вы можете получить значение id из внутреннего объекта $route.

2. Alias-ы:
Вы можете использовать алиасы для маршрутов в вашем файле nuxt.config.js. Например, если у вас есть несколько маршрутов, которые должны использовать одну и ту же страницу, вы можете добавить алиасы для каждого из них. Пример конфигурации:

   export default {
     router: {
       extendRoutes(routes, resolve) {
         routes.push({
           name: 'route1',
           path: '/route1',
           component: resolve(__dirname, 'pages/Page.vue')
         })
         routes.push({
           name: 'route2',
           path: '/route2',
           component: resolve(__dirname, 'pages/Page.vue')
         })
       }
     }
   }

В этом примере оба маршрута /route1 и /route2 будут использовать компонент Page.vue.

3. Компоненты высшего порядка (HOC):
Вы можете создать общий компонент высшего порядка, который оборачивает содержимое страницы и определяет логику, которая различается в зависимости от маршрута. Например, вы можете создать компонент HOCPage и делегировать его маршруту в вашем файле pages/_id.vue:

   <template>
     <HOCPage :route="$route">
       <!-- Содержимое страницы -->
     </HOCPage>
   </template>
   
   <script>
   import HOCPage from '~/components/HOCPage.vue'
   
   export default {
     components: {
       HOCPage
     }
   }
   </script>

В компоненте HOCPage вы можете использовать маршрут из объекта props для определения разной логики или отображения разных компонентов, в зависимости от маршрута.

В целом, в Nuxt 3 вы можете использовать различные подходы для использования одной страницы для разных маршрутов, в зависимости от специфических требований вашего проекта. Выберите подход, который лучше всего подходит вам и дает наибольшую гибкость в разработке приложения.