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"?

Odpowiedzi:



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: {} }
     }"
>

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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.