How to change url in vue-router without updating the route?

Question

Vue.js

There is such a route

{
    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
как можно решить такую проблему?
заранее спасибо

Answer 1

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