Opcjonalny parametr w routerze vuejs

105

Muszę skierować się do określonego składnika na dwa sposoby - jeden z parametrem, drugi bez. Szukałem opcjonalnych parametrów i jakoś nie mogę znaleźć wielu informacji.

Więc moja trasa:

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

Kiedy wywołuję to programowo za pomocą parametru, wszystko jest w porządku

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

Jednak muszę też zadzwonić do tego przez nawigację w ten sposób

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

offersSkładnik przyjmuje podpory

props: ['member'],

I komponent używany jako taki

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

Teraz brzydki sposób, w jaki udało mi się to uruchomić, polega na powieleniu trasy i sprawieniu, że jeden z nich nie bierze rekwizytów:

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

To faktycznie działa, ale nie jestem z niego zadowolony - ostrzega mnie również w trybie deweloperskim vuejs [vue-router] Duplicate named routes definition: { name: "offers", path: "/offers" }

Z pewnością istnieje sposób na wykonanie opcjonalnego parametru w wywołaniu komponentu :member="member"?

yoyoma
źródło

Odpowiedzi:

236

Samo dodanie znaku zapytania ?spowoduje, że będzie to opcjonalne.

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

Działa od wersji Vue Router 2.0.

Źródło: https://github.com/vuejs/vue-router/issues/235#issuecomment-245447122

Jacob Goh
źródło
20
Chciałbym, żeby to było w przewodniku!
Damon,
3
Dzięki, to jest bardzo pomocne. Chciałbym, żeby było to wyraźnie wymienione w przewodniku.
Gaurav Joshi
1

Dodatkowo możesz również wysyłać różne parametry, z których wywołujesz swoją trasę.

<router-link
    :to="{
     name: 'ComponentName',
     params: { member: {}, otherParams: {} }
     }"
>
Amit Kadam
źródło
0

W przypadku zaawansowanych wzorców dopasowywania instrukcja mówi :

vue-router używa path-to-regexp jako silnika dopasowywania ścieżek, więc obsługuje wiele zaawansowanych wzorców dopasowywania, takich jak opcjonalne segmenty dynamiczne, zero lub więcej / jedno lub więcej wymagań, a nawet niestandardowe wzorce wyrażeń regularnych. Zapoznaj się z dokumentacją dotyczącą tych zaawansowanych wzorców i tym przykładem wykorzystania ich w vue-routerze.

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

JCH77
źródło