vue-router: define pretty URL for filter page with pagination

I'm using NuxtJS for my static website and I want to create a shop page with filter, sort, and pagination. How can I define vue-router extend in nuxt.conf.js for this situation:

• shop page:
  example.com/shop/

• shop page with pagination:
  example.com/shop/page/2

• shop page with filters and pagination:
  example.com/shop/filters/color-green/size-big/page/2

• shop page with filters, pagination and sort:
  example.com/shop/filters/color-green/size-big/page/2/sort/ASC

I'm currently using this block of code, but this is very simple and works just for pagination:

router: {
  trailingSlash: true,
  extendRoutes(routes, resolve) {
    routes.push({
      path: '/shop/page/:number',
      component: resolve(__dirname, 'pages/shop.vue')
    })
  }
}

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW