vue.js - Vue.JS 路由可选参数和任意顺序

Question

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

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

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

 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。

查看文档以获取更多信息。