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

Question

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

在我们的 webapp 中，我们有超过 500 多个视图，因此我们在运行时解析路由，并在必要时加载组件（ .vue ），因为在路由文件中设置这 500 个视图中的每一个视图会很疯狂。

假设我们有一个名为“Products”的视图，我们的客户有多个过滤器选项，并且这些过滤器在过滤某些内容时传入 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

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

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

假设我们有一个名为“Products”的视图，我们的客户有多个过滤器选项，并且这些过滤器在过滤某些内容时传入 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 ）