[vue.js] vuejs 라우터의 선택적 매개 변수

Program / 글쓴이

두 가지 방법으로 특정 구성 요소로 라우팅해야합니다. 하나는 매개 변수가있는 방법이고 다른 하나는없는 방법입니다. 선택적 매개 변수를 검색했는데 어떻게 든 많은 정보를 찾을 수 없습니다.

그래서 내 경로 :

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

프로그래밍 방식으로 param을 사용하여 호출하면 모든 것이 좋습니다.

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

답변

또한 경로를 호출하는 곳에서 다른 매개 변수를 보낼 수도 있습니다.

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

답변

고급 매칭 패턴의 경우 설명서에 다음과 같이 나와 있습니다 .

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

regexp 경로 페이지 / 매뉴얼 => https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#parameters

답변