Vue.JS 带有可选参数和任意顺序的路由

Question

我想在我的 Vue.JS 应用程序中使用 vue-router 查询参数，如下所示：

http://localhost:8080/#/home/name=Alice&surname=Smith

我已将此路线添加到 router.ts 中的 routes:

 routes: [{
    path: '/home/name=:name&surname=:surname',
    name: 'home',
    component: Home
 }]

另外我想做的是以下两件事：

1) 我希望能够以任何顺序使用参数 name 和 surname。例如。这两个 URL 应该指向相同的视图：

http://localhost:8080/#/home/name=Alice&surname=Smith
http://localhost:8080/#/home/surname=Smith&name=Alice

2) 我也希望它们是可选的。

有办法做到这些吗？谢谢！

Answer 1

要实现你想要的，你必须改变路线：

routes: [{
    path: '/home',
    name: 'home',
    component: Home
}]

使用查询参数打开这条路线：

router.push({ name: 'home', query: { name: 'Alice', surname: 'Smith' }});

url 将是（url 中查询键的顺序无关紧要）：

http://localhost:8080/#/home?name=Alice&surname=Smith

在路由中，您可以获得查询参数 this.$route.query.name & this.$route.query.surname。

查看 documentation 以获取更多信息。

Vue.JS routing with optional parameters and in any order