路由器中的可选参数

我需要用两种方式路由到某个组件——一种带有 param，一种没有。我已经搜索了可选的参数，但不知为何找不到太多的信息。

所以我的路线是:

{
path: '/offers/:member',
component: Offers,
name: 'offers',
props: true,
meta: {
guest: false,
needsAuth: true
}
},

当我用参数以编程方式调用它时，一切正常

this.$router.push({ path: /offers/1234 });

但是我也需要像这样通过导航调用它吗

<router-link to="/offers">Offers</router-link>

offers组件接受道具

props: ['member'],

以及这样使用的组件

<Offers :offers="data" :member="member"></Offers>

现在，我设法让它工作的丑陋方式是复制路线，使其中之一不采取道具:

{
path: '/offers',
component: Offers,
name: 'offers',
props: false,
meta: {
guest: false,
needsAuth: true
}
},

它实际上工作，但我不满意它-也在开发模式 vuejs 是警告我 [vue-router] Duplicate named routes definition: { name: "offers", path: "/offers" }

在 :member="member"组件中肯定有可选的 param 的方法吧？

88372 次浏览

小开

最佳答案

只需添加一个问号 ?将使其成为可选的。

{
path: '/offers/:member?',
...
},

它适用于 Vue 路由器2.0版本。

小开

此外，您还可以从调用路由的地方发送不同的参数。

<router-link
:to="{
name: 'ComponentName',
params: { member: {}, otherParams: {} }
}"
/>

小开

对于匹配手册上说模式的高级路线:

Vue-router 使用 到正则表达式的路径作为路径匹配引擎，因此它支持许多高级匹配模式，例如可选的动态段、零或多个/一个或多个需求，甚至自定义正则表达式模式。查看它关于这些高级模式的文档，以及在 vue-router 中使用这些模式的示例。