vuejs 라우터의 선택적 매개 변수

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

실제로 작동하지만 만족스럽지 않습니다. 개발 모드에서도 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

참조 URL : https://stackoverflow.com/questions/47824660/optional-param-in-vuejs-router