Parâmetro opcional no roteador vuejs

105

Eu preciso rotear para um determinado componente de duas maneiras - uma com um parâmetro, outra sem. Pesquisei parâmetros opcionais e de alguma forma não consigo encontrar muitas informações.

Então, minha rota:

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

Quando eu chamo com o param programaticamente, está tudo bem

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

No entanto, também preciso chamá-lo via nav assim

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

O offerscomponente aceita o prop

props: ['member'],

E o componente usado como tal

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

Agora, a maneira mais feia que consegui fazer funcionar é duplicar a rota e fazer com que um deles não receba acessórios:

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

Ele realmente funciona, mas não estou feliz com isso - também no modo dev, o vuejs está me avisando [vue-router] Duplicate named routes definition: { name: "offers", path: "/offers" }

Certamente há uma maneira de fazer parâmetros opcionais na chamada do componente :member="member"?

yoyoma
fonte

Respostas:

232

Apenas adicionar um ponto de interrogação ?o tornará opcional.

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

Funciona com o Vue Router 2.0 em diante.

Fonte: https://github.com/vuejs/vue-router/issues/235#issuecomment-245447122

Jacob Goh
fonte
20
Adoraria se isso estivesse no guia!
Damon
3
Obrigado, isso é muito útil. Gostaria que isso fosse claramente mencionado no guia.
Gaurav Joshi
1

Além disso, você também pode enviar parâmetros diferentes, de onde você chama sua rota.

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

Para padrões de correspondência avançados, o manual diz :

O vue-router usa path-to-regexp como mecanismo de correspondência de caminho, portanto, ele oferece suporte a muitos padrões de correspondência avançados, como segmentos dinâmicos opcionais, zero ou mais / um ou mais requisitos e até mesmo padrões de regex personalizados. Verifique sua documentação para esses padrões avançados e este exemplo de como usá-los no vue-router.

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

JCH77
fonte