我需要以两种方式路由到某个组件 - 一种带有参数,一种没有。我搜索了可选参数,但不知何故找不到太多信息。
所以我的路线:
{ 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接受道具
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" }
[vue-router] Duplicate named routes definition: { name: "offers", path: "/offers" }
当然有一种方法可以在组件调用中执行可选参数:member="member"吗?
:member="member"
只需添加一个问号即可?使其成为可选。
?
{ path: '/offers/:member?', ... },
它适用于 Vue Router 2.0 及更高版本。
来源:https ://github.com/vuejs/vue- router/issues/235#issuecomment-245447122