NuxtJS and multilevel human-readable filters

Question

Good day to all!

I'm facing a big problem that I can't find an approach to.

In short - I would like to be able to generate multi-level routes of previously unknown length to create filters.

More details There is a website site.com

It has sections: site.com/news, site.com/articles and so on. For simplicity, I will denote them as site.com/section

Each section has categories: site.com/news/people, site.com/articles/how. For simplicity, I will denote them as site.com/section/category

The number of sections and categories can be more than one piece

When a user goes to a section, they see the entire list of posts in that section.

When the user goes to the category of the section, he sees only the news inside the category.

There are several such sections, so I set @nuxt/routejs to disable routing based on the pages directory. The route.js looks like this

Vue.use(Router)

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
        // Home page of the site
      {
        path: '/',
        component: BasePage,
      },
      // Page with a section
      {
        name: 'section',
        path: '/:section',
        component: PostBase,
      },
      // Also a page with a section, but with pagination taken into account
      {
        name: 'section-page',
        path: '/:section/page/:page',
        component: PostBase,
      },
      // Category page inside the section
      {
        name: 'category',
        path: '/:section/:category',
        component: PostBase,
      },
      // Category page inside the section, but with pagination taken into account
      {
        name: 'category-page',
        path: '/:section/:category/page/:page',
        component: PostBase,
      },
    ]
  })
}

And then I don't know how to solve the problem properly. I want to give the user the ability to use a "smart filter" that is as close to SEO recommendations as possible. For example, it can use a single filter and get this:

site.com/news/sorting-date

And can get it:

site.con/news/sorting-date/author-elisa/page/4

Or is it:

site.com/news/people/sorting-views/city-new-york/page/2

I could give more examples, but I think it is clear from the three that with an unknown number of filters (which I set through the admin panel), there may be an unknown number of slashes.

What should I do? How to solve this problem correctly?

I also apologize for a very bad English. I really hope for your help or even tips :)

Answer 1

You can do this with the "one or more" or the "zero or more" matchers:

{
  name: 'category',
  path: '/:section/:category/:filters*',  // or :filters+ if you want at least one
  component: PostBase,
},

then you will have under this.$route.params.filters with values like "sorting-views/city-new-york/page/2"

for more info see the documentation on vue router and also the documentation of the library used underneath path-to-regexp