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

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

나는 두 가지 방법으로 특정 구성요소로 경로를 지정해야 한다. 하나는 매개 변수가 있고 다른 하나는 없는 것이다.나는 선택 가능한 매개 변수를 찾아봤지만 웬일인지 많은 정보를 찾을 수 없다.

그래서 내가 가는 길:

{
    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구성 요소가 받침대를 받아들임

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

고급 경로 일치 패턴의 경우 설명서에 다음과 같이 나와 있다.

vue-to-regexp를 경로 일치 엔진으로 사용하므로 옵션 동적 세그먼트, 0 이상/하나 이상의 요구 사항, 심지어 사용자 지정 regex 패턴과 같은 많은 고급 일치 패턴을 지원한다.고급 패턴에 대한 설명서와 이 예제를 확인하십시오.

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

또한, 당신은 당신의 경로를 호출하는 곳으로부터 다른 파라암을 보낼 수도 있다.

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

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