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 offers
componente 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"
?
Além disso, você também pode enviar parâmetros diferentes, de onde você chama sua rota.
fonte
Para padrões de correspondência avançados, o manual diz :
path-to-regexp page / manual => https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#parameters
fonte