在vue.js中进行两种类型的路由参数

Question

我想在产品随后将URL放在嵌套的类别集中。不确定如何正确匹配路线。

我想拥有的URL：

--- renders a "category.show.vue": /$categorySlug+
app.com/catA/catB/
app.com/catA/catB/catXXX

--- renders a "product.show.vue": /$categorySlug+/$id-$productSlug
app.com/catA/111-nvidia-rtx-3080ti
app.com/catA/catB/222-nvidia-rtx-2060
app.com/catC/catD/333-iphone-13-pro

我尝试了这个，但它给了我错误：

{
  path: '/:slug(\\w+)+/:productSlug(\\d+)',
  name: 'product.show',
  props: route => ({ slug: route.params.slug }),
  component: () => import('pages/product.show.vue')
},
{
  path: '/:slug+',
  name: 'category.show',
  props: route => ({ slug: route.params.slug }),
  component: () => import('pages/category.show.vue')
}

有没有办法使它一起工作？

Answer 1

中的REGEX模式：productsLug（\\ d+）（即，\ d+）仅匹配数字，但是您的产品URL实际上不仅包含数字（例如，之一，它们以/111-NVIDIA-RTX-3080TI结束，因此不发生匹配。参数的模式必须与完全匹配。

要解决问题，请在productslug模式中添加一个通配符匹配器：

// BEFORE
// :productSlug(\\d+)

// AFTER
:productSlug(\\d+.+)
                 ^^ one or more characters, matching anything

另外，每个URL中似乎只有一个产品，因此路由参数的模式不应附上> +：

// BEFORE
// :productSlug(⋯)+

// AFTER
:productSlug(⋯)

product.show的最终路由路径应为：

path: '/:slug(\\w+)+/:productSlug(\\d+.+)',

demo