vue-router：为带分页的过滤页面定义漂亮 URL

Question

我正在为我的静态网站使用 NuxtJS，我想创建一个具有筛选、排序和分页功能的商店页面。对于这种情况，我如何在 nuxt.conf.js 中定义 vue-router extend:

店铺页面：
例如。com/shop/
带分页的商店页面：
例如。com/shop/page/2
带有过滤器和分页的商店页面：
例如。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

您必须创建多个路由才能正常工作。

如果您尝试仅通过一条路线实现它，则架构存在一些问题。

example.com/shop/ 可能后跟分页或过滤器。
过滤器可能包含 1 个或多个项目。
分页后可能还会进行排序。
在没有分页的情况下，可以在筛选后进行排序吗？

所以可以处理以上所有问题的单一路径类似于

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

这会执行以下操作，

所有参数都是可选的。
过滤器可以包含 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 使用 path-to-regexp, you can test it on forbeslindesay.github.io/express-route-tester

vue-router：为带分页的过滤页面定义漂亮 URL

vue-router: define pretty URL for filter page with pagination

javascript

static

vue.js

vue-router

nuxt.js