Как в vue-router менять url не обновляя роут?

Question

[Дарья Не важно]

Есть вот такой роут

{
    path: '/catalog/:slug',
    name: 'CatalogCategory',
    props: true,
    component: () => import(/* webpackChunkName: "Category" */ '../views/CatalogCategory')
  },

и в url выходит вот такая ссылка domain-name/catalog/best
внутри этого компонента есть фильтр, он работает нормально, но заказчику нужно чтобы при выборе любого итема в фильтре менялся url к примеру на вот такой domain-name/catalog/best/color-12
но я не знаю как это сделать
пробовала через this.$router.push добавлять color-12, но когда добавляется то роут меняться на

{
    path: '*',
    name: 'error',
    component: () => import(/* webpackChunkName: "error" */ '../layouts/ErrorLayout.vue'),
    meta: {
      layout: 'error-layout'
    }
  },

и рендериться errorLayout
как можно решить такую проблему?
заранее спасибо

Comments

[Froggyweb]

a SSR работает или заказчик об этом не знает. Query string общепринятый стандарт для фильтров
а эти сеошники.... Может в приложении очень правильный на его взгляд адрес, но поисковики на нем видят боди и див с ид

Answer 1

[Aetae]

Всё просто - опциональный параметр: /catalog/:slug/:option?.
Если нужно много всякой фигни накрутить, то можно и вообще regexp: /catalog/:slug/(.*)? и ловить любые пути.

Comments

[Дарья Не важно]

Спасибо !!! Применила варик с regexом