如何在 Vue 3 (Vue Router) 中设置具有多个动态参数的动态路由

Question

使用 Vue 3 和 Vue Router，如何创建具有多个动态参数的动态路由？
这些参数需要能够以任何顺序传递。

在我们的 web 应用程序中，我们有超过 500 多个视图，因此我们在运行时解析路由，并在必要时加载组件 (.vue)，因为在路由文件中设置这 500 个视图中的每一个都太疯狂了。

假设我们有一个名为“产品”的视图，我们的客户有多个过滤器选项，并且这些过滤器在过滤某些内容时会在 URL 中传递。它们可以传递 0 个参数或 10+ 个参数。这取决于他们过滤的内容。

假设用户可以传递如下 URL：
www.webapp.com/products
www.webapp.com/products/color/red
www.webapp.com/products/brand/myBrand/color/green
www.webapp.com/products/size/36/brand/myBrand
以及其他多种动态可能性。

我尝试使用通配符 * 添加路由，但它根本不起作用。
我尝试了什么：
{path: '/products/:(.*)', ...}
{path: '/products/:params(.*)', ...}
{path: '/products/:(.*)*', ...}{path: '/products/:params(.*)*', ...}
{path: '/products/*', ...}
{path: '/products-*', ...}

这些尝试都没有奏效。有些抛出了错误，有些只是从 URL 中删除了参数，只留下了/products。在所有尝试中，this.$route.params 都是空的。

如何使用 Vue 3 和 Vue Router 以任意顺序创建具有多个动态参数的动态路由？

Obs：为了“友好 URL”，我们无法使用查询，因为它们很丑
（例如：products?color=red&size=10&brand=my%20brand）

Answer 1

您的尝试可能失败了，因为它们将named parameter syntax（: 后跟参数名称）与unnamed parameter syntax（(.*)）混合在一起。

对于零个或多个命名参数（例如，命名myParams），请使用以下模式：

:myParams*

我建议使用props function 来解析要作为道具传递给组件的路由参数，这样可以将参数格式保存在一个中心位置，并使组件不必检查路由：

const routes = [
  {
    path: '/products/:myParams*',
    component: () => import('@/components/Products.vue'),

    // parse key-value pairs into an object
    props: route => {
      const params = route.params.myParams
      const props = {}
      for (let i = 0; i < params.length; i += 2) {
        const value = i + 1 < params.length ? params[i + 1] : null
        props[params[i]] = value
      }
      return props
    }
  }
]

demo