Javascript 如何在Vue 3（Vue路由器）中使用多个动态参数设置动态路由

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

在我们的webapp中，我们有超过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”，我们无法使用查询，因为它们很难看
（例如：

产品？color=red&size=10&brand=my%20brand

）

您的尝试可能失败，因为它们混合了（

：

，后跟参数名）和（

（*）

）

对于零个或多个命名参数（例如命名的

myParams

），请使用以下模式：

:myParams*

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

const路由=[
{
路径：'/products/：myParams*'，
组件：（）=>导入（'@/components/Products.vue'），
//将键值对解析为对象
道具：路线=>{
常量参数=route.params.myParams
常量props={}
对于（设i=0；i

---

您的尝试可能失败，因为它们混合了（

：

，后跟参数名）和（

（.*）

）

对于零个或多个命名参数（例如命名的

myParams

），请使用以下模式：

:myParams*

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

const路由=[
{
路径：'/products/：myParams*'，
组件：（）=>导入（'@/components/Products.vue'），
//将键值对解析为对象
道具：路线=>{
常量参数=route.params.myParams
常量props={}
对于（设i=0；i

---

太好了，尝试了很多选择，但没有找到一个。。。我仍在努力使用

addRoute（）

在路由器导航到路由之前，在需要时动态创建路由，但我正在尝试，您的回答已经帮了我很多。谢谢太好了，尝试了这么多选择，但没有找到一个。。。我仍在努力使用

addRoute（）

在路由器导航到路由之前，在需要时动态创建路由，但我正在尝试，您的回答已经帮了我很多。谢谢