NuxtJS 和多级人类可读过滤器答案

【问题标题】：NuxtJS and multilevel human-readable filtersNuxtJS 和多级人类可读过滤器
【发布时间】：2021-06-17 18:19:17
【问题描述】：

祝大家今天好！

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

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

更多细节有一个网站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.com/news/sorting-date

并且可以得到它：

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

或者是：

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

我可以举更多的例子，但我认为从这三个例子中可以清楚地看出，在未知数量的过滤器（我通过管理面板设置）的情况下，可能会有未知数量的斜杠。

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

我也为我的英语非常糟糕而道歉。我真的希望你的帮助甚至提示:)

【问题讨论】：

标签： javascript seo nuxt.js

【解决方案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" 之类的值

有关更多信息，请参阅documentation on vue router 以及path-to-regexp 下使用的库的文档

【讨论】：