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' }});

网址将是(网址中查询键的顺序无关紧要(：

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

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

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

Answer 2

如果你想在路由器链接中用户，那么使用这个

<router-link v-bind:to="{path:'/home' ,query: { name: 'helo' }}">home</router-link>"

然后使用this.$route.query.name获取此内容