title: NuxtJS and multilevel human-readable filters
body: <p>Good day to all!</p>
  <p>I'm facing a big problem that I can't find an approach to.</p>
  <p>In short - I would like to be able to generate multi-level routes of previously unknown length to create filters.</p>
  <p>More details
  There is a website site.com</p>
  <p>It has sections: <strong>site.com/news</strong>, <strong>site.com/articles</strong> and so on. For simplicity, I will denote them as <strong>site.com/section</strong></p>
  <p>Each section has categories: <strong>site.com/news/people</strong>, <strong>site.com/articles/how</strong>. For simplicity, I will denote them as <strong>site.com/section/category</strong></p>
  <p>The number of sections and categories can be more than one piece</p>
  <p>When a user goes to a section, they see the entire list of posts in that section.</p>
  <p>When the user goes to the category of the section, he sees only the news inside the category.</p>
  <p>There are several such sections, so I set <strong>@nuxt/routejs</strong> to disable routing based on the pages directory.
  The route.js looks like this</p>
  <pre><code>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,
        },
      ]
    })
  }
  </code></pre>
  <p>And then I don't know how to solve the problem properly.
  I want to give the user the ability to use a &quot;smart filter&quot; that is as close to SEO recommendations as possible.
  For example, it can use a single filter and get this:</p>
  <blockquote>
  <p>site.com/news/sorting-date</p>
  </blockquote>
  <p>And can get it:</p>
  <blockquote>
  <p>site.con/news/sorting-date/author-elisa/page/4</p>
  </blockquote>
  <p>Or is it:</p>
  <blockquote>
  <p>site.com/news/people/sorting-views/city-new-york/page/2</p>
  </blockquote>
  <p>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.</p>
  <p>What should I do? How to solve this problem correctly?</p>
  <p>I also apologize for a very bad English. I really hope for your help or even tips :)</p>