Как сделать динамические пути (slug) для категорий?

В Nuxt.js, фреймворке для разработки приложений на Vue.js, можно легко создать динамические пути (slug) для категорий с помощью параметров маршрутизации.

Вот шаги, которые нужно выполнить для создания динамического пути для категорий:

1. Создайте страницу-компонент для отображения категорий. Назовите ее, например, "Category.vue". В этом компоненте вы можете отобразить список категорий или другую информацию, связанную с конкретной категорией.

2. В файле "nuxt.config.js" определите динамический путь для категорий, задав параметр "extendRoutes" для роутера:

export default {
  // ...
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'category',
        path: '/category/:slug', // где ":slug" является динамическим параметром пути
        component: resolve(__dirname, 'pages/Category.vue'),
      })
    },
  },
}

3. Добавьте маршрут для категорий в ваш файл "nuxt.config.js". Создавая маршрут с именем "category", мы указываем, что при обращении по динамическому пути "/category/:slug" должен использоваться компонент "Category.vue".

4. В компоненте "Category.vue" вы можете получить значение динамического параметра пути используя "$route.params.slug" во время выполнения.

<script>
export default {
  computed: {
    category() {
      return this.$route.params.slug;
    },
  },
};
</script>

Теперь, когда пользователь переходит по пути "/category/категория-1", значение "категория-1" будет доступно в компоненте "Category.vue" через параметр "$route.params.slug". Это позволяет отображать правильную информацию или данные для каждой категории.

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