Javascript vue路由器中的多个optionals键值

使用vue路由器，我需要创建一个可以处理多个可选参数的路由。 例如，我需要一条可以处理以下问题的路线：

字母是键，数字是相对值

实际上我是这样编码的

const router = new VueRouter({
    mode: 'history',
    base: __dirname,
    routes: [
        { path: '/something/a/:a/b/:b/c/:c', component: MyComponent },
        { path: '/something/a/:a/b/:b', component: MyComponent },
        { path: '/something/a/:a/c/:c', component: MyComponent },
        { path: '/something/b/:b/c/:c', component: MyComponent },
        { path: '/something/a/:a', component: MyComponent },
        { path: '/something/b/:b', component: MyComponent },
        { path: '/something/c/:c', component: MyComponent },
        { path: '/something/', component: MyComponent },
    ]
})

使用正则表达式可以实现这一点吗？也许我可以使用

'/something/*'

以后再提取参数吗？
顺便说一下，值都是整数。

从我发现我可以使用括号和

？

以这种方式使路径成为可选路径

/路径/（foo/）？巴

但是如果您也用参数

/path/（foo/：foo）？

将参数名称用文字解释为URI的一部分（在本例中为

:foo

），因此只有路由

/path/

和

/path/foo/：foo

（

:foo

在URI中是文字而不是参数！）可以工作

所以我想用正则表达式代替简单的

/something/*

。 我使用了regex

/something/（a/\\d+）/（b/\\d+）/（c/\\d+）

（

\\d+

是数字的regex，但您可以在这里使用任何regex）

然后，在类似于

/something/a/5/b/6/c/7

的URI中的

this.$route.params

中获得的值将

{ 1: "b/6", 2: "c/7", pathMatch: "a/5" }

如果未设置值，则该值将

未定义

// /something/a/5/c/7
{ 1: undefined, 2: "c/7", pathMatch: "a/5" }

现在在

MyComponent

中，我编辑了

这个.route.params

使它看起来更好

export default {
    mounted() {
        console.log(this.$route.params);
        if (this.$route.params.pathMatch) {
            let res = this.$route.params.pathMatch.split("/");
            this.$route.params[res[0]] = res[1];
        }
        delete this.$route.params.pathMatch;
        if (this.$route.params[1]) {
            let res = this.$route.params[1].split("/");
            this.$route.params[res[0]] = res[1];
        }
        delete this.$route.params[1];
        if (this.$route.params[2]) {
            let res = this.$route.params[2].split("/");
            this.$route.params[res[0]] = res[1];
        }
        delete this.$route.params[2];
        console.log(this.$route.params);
    }
}

也许您可以在第二部分做得更好（例如，您可以编写期望的键，而不是

res[0]

，或者您可以以迭代的方式完成所有工作），但它是有效的

{ a: "5" b: "6", c: "7" }

---

好的，当我有足够的时间时，我会尝试完整的例子

export default {
    mounted() {
        console.log(this.$route.params);
        if (this.$route.params.pathMatch) {
            let res = this.$route.params.pathMatch.split("/");
            this.$route.params[res[0]] = res[1];
        }
        delete this.$route.params.pathMatch;
        if (this.$route.params[1]) {
            let res = this.$route.params[1].split("/");
            this.$route.params[res[0]] = res[1];
        }
        delete this.$route.params[1];
        if (this.$route.params[2]) {
            let res = this.$route.params[2].split("/");
            this.$route.params[res[0]] = res[1];
        }
        delete this.$route.params[2];
        console.log(this.$route.params);
    }
}

{ a: "5" b: "6", c: "7" }