我需要以两种方式路由到某个组件——一种是带参数的,另一种是不带参数的.我已经搜索了可选参数,但不知何故找不到太多信息.

所以我的路由是:

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

当我用param编程调用它时,一切都很好

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

但是我也需要通过导航这样称呼它

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

offers组件接受props

props: ['member'],

以及使用的组件

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

现在,我设法让它工作的丑陋方式是复制路由,让其中一个不带props :

{
    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"中执行可选参数吗?

推荐答案

只需添加一个问号?就可以了.

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

它适用于Vue路由2.0以后的版本.

资料来源:https://github.com/vuejs/vue-router/issues/235#issuecomment-245447122

Vue.js相关问答推荐

为什么在Vue.js中修改非react 性似乎是react 性的?

VueUse onClickOutside不支持右键单击

Vuetify 2中自定义标头的排序和筛选

如何在vue js模板中添加foreach和for循环

有什么理由不在 vue3 中使用