Parameter opsional di router vuejs

Saya perlu merutekan ke komponen tertentu dengan dua cara - satu dengan param, satu tanpa. Saya telah mencari parameter opsional dan entah bagaimana tidak dapat menemukan banyak info.

Jadi rute saya:

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

Ketika saya menyebutnya dengan param secara terprogram, semuanya baik-baik saja

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

Namun saya juga perlu menyebutnya melalui nav seperti ini

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

The offerskomponen menerima prop

props: ['member'],

Dan komponen digunakan seperti itu

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

Sekarang cara jelek saya berhasil membuatnya bekerja adalah menduplikasi rute dan membuat salah satu dari mereka tidak menggunakan alat peraga:

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

Ini benar-benar berfungsi, tetapi saya tidak menyukainya - juga dalam mode pengembang vuejs memperingatkan saya [vue-router] Duplicate named routes definition: { name: "offers", path: "/offers" }

Tentunya ada cara untuk melakukan parameter opsional dalam pemanggilan komponen :member="member"?

Hanya menambahkan tanda tanya ?akan menjadikannya opsional.

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

Ini berfungsi untuk Vue Router 2.0 dan seterusnya.

Sumber: https://github.com/vuejs/vue-router/issues/235#issuecomment-245447122

Selain itu, Anda juga dapat mengirim parameter yang berbeda, dari mana Anda memanggil rute Anda.

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

Untuk pola pencocokan tingkat lanjut , manual mengatakan :

vue-router menggunakan path-to-regexp sebagai mesin pencocokan jalurnya, sehingga mendukung banyak pola pencocokan lanjutan seperti segmen dinamis opsional, nol atau lebih / satu atau lebih persyaratan, dan bahkan pola regex kustom. Lihat dokumentasinya untuk pola lanjutan ini, dan contoh penggunaannya di vue-router.

path-to-regexp halaman / manual => https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#parameters