Как в Vue Router сделать часть URL необязательной?

Здравствуйте!

Для проекта на Nuxt, вы хотите получить URL-ы следующего формата:
/catalog/mebel
/catalog/mebel/page-2
/catalog/mebel/stulya/page-2
/catalog/mebel/stulya/stul-eames (это уже сам товар)

Правильно ли я понимаю, что вы хотите использовать хук "pages:extend", но не уверены, как правильно описать его, чтобы получить указанные выше URL-ы?
  • 29 сентября 2023 г. 14:07
Ответы на вопрос 2
Да, вы правильно понимаете. Чтобы сделать часть URL необязательной, вы можете использовать параметры маршрута в Vue Router. Ниже пример описания маршрута для вашего случая:

```JavaScript
const routes = [
  // ...
  {
    path: '/catalog/:category/:subCategory?/:product?',
    name: 'catalog',
    component: CatalogPage
  }
  // ...
]
```

Обратите внимание на использование "?"

- ":subCategory?" означает, что это параметр маршрута необязательный
- ":product?" также является необязательным параметром маршрута

Теперь вы можете использовать маршруты следующим образом:

```JavaScript
// /catalog/mebel
this.$router.push({ name: 'catalog', params: { category: 'mebel' } })

// /catalog/mebel/page-2
this.$router.push({ name: 'catalog', params: { category: 'mebel', subCategory: 'page-2' } })

// /catalog/mebel/stulya/page-2
this.$router.push({ name: 'catalog', params: { category: 'mebel', subCategory: 'stulya', product: 'page-2' } })

// /catalog/mebel/stulya/stul-eames
this.$router.push({ name: 'catalog', params: { category: 'mebel', subCategory: 'stulya', product: 'stul-eames' } })
```

Надеюсь, это поможет вам реализовать нужный функционал в вашем проекте!
Вот как вы можете создать маршруты на обычном Vue роутере: 

```
{
  path: '/catalog/mebel',
  children: [
    {
      path: 'page-:page(\\d+)?',
      alias: '',
      component: Mebel,
    },
    {
      path: ':category',
      children: [
        {
          path: 'page-:page(\\d+)?',
          alias: '',
          component: MebelCategory
        },
        {
          path: ':article',
          component: MebelArticle
        }
      ]
    },
  ],
}
```

В Nuxt.js вы можете добавить или изменить маршруты в файле проекта, который обычно называется `nuxt.config.js`.
Похожие вопросы