如何解决NuxtJS 和多级人类可读过滤器
大家好!
我面临一个大问题,我找不到解决办法。
简而言之 - 我希望能够生成以前未知长度的多级路由来创建过滤器。
更多详情 有一个网站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',// Category page inside the section
{
name: 'category',path: '/:section/:category',// Category page inside the section,but with pagination taken into account
{
name: 'category-page',path: '/:section/:category/page/:page',]
})
}
然后我不知道如何正确解决问题。 我想让用户能够使用尽可能接近 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
我可以举更多的例子,但我认为从这三个中可以清楚地看出,如果过滤器数量未知(我通过管理面板设置),可能会有未知数量的斜线。
我该怎么办?如何正确解决这个问题?
我也为非常糟糕的英语道歉。我真的希望得到您的帮助甚至提示:)
解决方法
您可以使用“一个或多个”或“零个或多个”匹配器来执行此操作:
{
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 下使用的库的文档
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。