Parámetro opcional en el enrutador vuejs


105

Necesito enrutar a un determinado componente de dos maneras: una con un parámetro y otra sin. He buscado parámetros opcionales y de alguna manera no puedo encontrar mucha información.

Entonces mi ruta:

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

Cuando lo llamo con el parámetro programáticamente, todo está bien

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

Sin embargo, también necesito llamarlo a través de nav así

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

El offerscomponente acepta la prop

props: ['member'],

Y componente utilizado como tal

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

Ahora, la forma fea en que he logrado que funcione es duplicando la ruta y haciendo que uno de ellos no tome accesorios:

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

En realidad funciona, pero no estoy contento con él, también en modo dev vuejs me advierte [vue-router] Duplicate named routes definition: { name: "offers", path: "/offers" }

Seguramente hay una manera de hacer un parámetro opcional en la llamada del componente :member="member".

Respuestas:



1

Además, también puede enviar diferentes parámetros, desde donde llame a su ruta.

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

0

Para patrones de coincidencia avanzados, el manual dice :

vue-router usa path-to-regexp como su motor de coincidencia de rutas, por lo que admite muchos patrones de coincidencia avanzados, como segmentos dinámicos opcionales, cero o más / uno o más requisitos, e incluso patrones de expresiones regulares personalizados. Consulte su documentación para conocer estos patrones avanzados y este ejemplo de cómo usarlos en vue-router.

ruta-a-regexp página / manual => https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#parameters

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.