พารามิเตอร์เสริมในเราเตอร์ vuejs

ฉันต้องการกำหนดเส้นทางไปยังส่วนประกอบบางอย่างในสองวิธี - หนึ่งด้วยพารามิเตอร์หนึ่งโดยไม่ต้อง ฉันได้ค้นหาพารามิเตอร์ที่เป็นทางเลือกและไม่พบข้อมูลมากนัก

ดังนั้นเส้นทางของฉัน:

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

เมื่อฉันเรียกมันด้วยพารามิเตอร์ทางโปรแกรมทุกอย่างเรียบร้อยดี

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

อย่างไรก็ตามฉันต้องเรียกมันผ่าน nav แบบนี้ด้วย

<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
    }
},

มันใช้งานได้จริง แต่ฉันไม่พอใจกับมัน - ในโหมด dev vuejs ก็เตือนฉันด้วย [vue-router] Duplicate named routes definition: { name: "offers", path: "/offers" }

แน่นอนว่ามีวิธีทำพารามิเตอร์เสริมในการเรียกส่วนประกอบ:member="member"หรือไม่?

เพียงแค่เพิ่มเครื่องหมายคำถาม?จะทำให้เป็นทางเลือก

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

ใช้งานได้กับ Vue Router 2.0 เป็นต้นไป

ที่มา: https://github.com/vuejs/vue-router/issues/235#issuecomment-245447122

นอกจากนี้คุณยังสามารถส่งพารามิเตอร์ต่าง ๆ จากจุดที่คุณเรียกเส้นทางของคุณได้อีกด้วย

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

สำหรับรูปแบบการจับคู่ขั้นสูงคู่มือระบุว่า :

vue-router ใช้ path-to-regexp เป็นเครื่องมือจับคู่พา ธ ดังนั้นจึงรองรับรูปแบบการจับคู่ขั้นสูงมากมายเช่นเซ็กเมนต์ไดนามิกที่เป็นทางเลือกข้อกำหนดศูนย์หรือมากกว่า / หนึ่งหรือมากกว่าและแม้แต่รูปแบบ regex ที่กำหนดเอง ดูเอกสารประกอบสำหรับรูปแบบขั้นสูงเหล่านี้และตัวอย่างการใช้งานใน vue-router

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