NuxtJS和多级人类可读滤波器

Question

祝大家今天愉快！

我正面临着一个我找不到办法解决的大问题。

简而言之，我希望能够生成以前未知长度的多级路由来创建过滤器。

更详细的信息有一个网站site.com

它有几个部分：site.com/news，site.com/articles等等。为了简单起见，我将它们表示为site.com/section

每个部分都有分类：site.com/news/people，site.com/articles/how.为了简单起见，我将它们表示为site.com/section/category

区段和类别的数量可以是多个部分。

当用户进入某个区段时，他们会看到该部分中的整个帖子列表。

当用户进入该区段的类别时，他只会看到该类别内的新闻。

有几个这样的部分，所以我将@nuxt/routejs设置为禁用基于页面目录的路由。route.js看起来像这样

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,
      },
    ]
  })
}

然后我就不知道如何正确地解决问题了。我想给用户的能力使用“智能过滤器”，这是尽可能接近SEO的建议。例如，它可以使用单个过滤器并获得以下内容：

网站/新闻/分类-日期

并能得到它：

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

或者是：

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

我可以给出更多的例子，但我认为从这三个方面可以清楚地看到，有一个未知数量的过滤器(我通过管理面板设置)，可能有一个未知的斜杠数目。

我该怎么办？如何正确解决这个问题？

我也为一个非常糟糕的英语道歉。我真的希望你的帮助，甚至建议:)

Answer 1

您可以使用“一个或多个”或“零或多个”匹配器来完成此操作：

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

然后，您将在this.$route.params.filters下使用像"sorting-views/city-new-york/page/2"这样的值。

有关更多信息，请参见关于vue路由器的文档和路径对正则表达式下面使用的库的文档