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

Question

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

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

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

想象一下，用户可以像下面这样传递 URLs：
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-*', ...}

None 这些尝试成功了。有的抛出错误，有的干脆把URL中的参数去掉，只留下/products。在所有尝试中，this.$route.params 都是空的。

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

Obs：为了 'Friendly URL'，我们无法使用查询，因为它们很难看
（例如：products?color=red&size=10&brand=my%20brand）

Answer 1

您的尝试可能失败了，因为它们混合了 named parameter syntax (: followed by the param name) with unnamed parameter syntax ((.*))。

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

:myParams*

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

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

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

How to set dynamic routes with multiple dynamic parameters in Vue 3 (Vue Router)

javascript

routes

vue.js

vue-router

vuejs3