vue-路由器:为带分页的过滤器页面定义漂亮的URL

Question

我的静态网站使用NuxtJS，我想创建一个带有过滤器、排序和分页的商店页面。在这种情况下，如何在nuxt.conf.js中定义vue-路由器扩展：

• 商店网页： example.com/shop/
• 带页码的商店页面： example.com/shop/page/2
• 带有过滤器和分页的商店页面： example.com/shop/filters/color-green/size-big/page/2
• 带有过滤器、分页和排序的商店页面： example.com/shop/filters/color-green/size-big/page/2/sort/ASC

我目前正在使用这段代码，但这非常简单，只适用于分页：

router: {
  trailingSlash: true,
  extendRoutes(routes, resolve) {
    routes.push({
      path: '/shop/page/:number',
      component: resolve(__dirname, 'pages/shop.vue')
    })
  }
}

Answer 1

您必须创建多个路由才能使其工作。

如果您只想通过一条路径来实现它，那么模式就会出现一些问题。

1. example.com/shop/之后可能是分页或筛选。
2. 过滤器可以包含一个或多个项目。
3. 分页之后也可能有一种排序。
4. 在没有分页的情况下，筛选器是否可以被排序？

因此，能够处理上述所有问题的单一路径如下所示

{
  path: '/shop/filters/:filter*/page/:number?/sort/:order?',
  component: resolve(__dirname, 'pages/shop.vue')
}

这做了以下工作，

1. 所有参数都是可选的。
2. 筛选器可以包含0或更多项。

但URL可能会把你绊倒。

# Ideal path with more than one filter, pagination, and sort
/shop/filters/color-green/size-big/page/2/sort/ASC

# Single filter, pagination, and sort
/shop/filters/size-big/page/2/sort/ASC

# No filters, but with pagination and sort
/shop/filters/page/2/sort/ASC

# No filter or pagination, but has sort
/shop/filters/page/sort/ASC

# No filter, pagination or sort (default page)
/shop/filters/page/sort

# No Sort
/shop/filters/color-green/size-big/page/2/sort

# no pagination
/shop/filters/color-green/size-big/page/sort/2

# no sort or pagination
/shop/filters/color-green/size-big/page/sort

但这显然不是你想要的。因此，相反，创建多条路径。

[{
  path: '/shop/',
  component: resolve(__dirname, 'pages/shop.vue')
},{
  path: '/shop/filters/:filter*/page/:number/sort/:order',
  component: resolve(__dirname, 'pages/shop.vue')
},{
  path: '/shop/filters/:filter*/page/:number',
  component: resolve(__dirname, 'pages/shop.vue')
},{
  path: '/shop/filters/:filter*',
  component: resolve(__dirname, 'pages/shop.vue')
},{
  path: '/shop/page/:number/sort:order',
  component: resolve(__dirname, 'pages/shop.vue')
},{
  path: '/shop/page/:number',
  component: resolve(__dirname, 'pages/shop.vue')
},]

我可能错过了什么，或者命令可能不准确，但我想你已经明白了你需要做的事情的要点。

由于vue-router使用路径对正则表达式，所以可以在Forbeslindesay.github.io/特快线路测试器上进行测试。