Para aclarar, tengo este enlace de enrutador dentro de una barra de navegación, que tiene un botón en la parte superior que cambia la ruta.
Aquí está el código para el contexto:
<router-link v-if="foo" :to="/"> ... <button @click="redirect"> GO </button> ...El método para la redirección:
redirect() { this.$router.push('/myroute').catch(() => {})Intenté usar el índice z en ambos elementos, pero cada vez que hago clic en el botón IR, primero va a '/myroute' y luego vuelve a '/'
¿Hay alguna forma de solucionar esto?
Podría llamar a event.stopPropagation() para evitar que este evento se propague en la fase burbujeante. Entonces el evento se detendrá solo en el elemento del botón.
redirect(e) { e.stopPropagation(); this.$router.push('/myroute').catch(() => {}); }Puede usar el modificador de parada para @click .
<router-link v-if="foo" :to="/"> ... <button @click.stop="redirect"> GO </button> ...Este es el equivalente vue de stopPropagation.
El índice z se trata más de la visualización del botón. Los eventos se propagan de tal manera que cuando hace clic en un elemento DOM interno, también hace clic en todo lo que está en (x, y), incluido el nodo contenedor. Si no hay nada más escuchando ese evento (que suele ser el caso), entonces el clic hace lo que desea.
Otra alternativa es hacer que el botón y el enlace del enrutador sean hermanos, y usar un <div></div> externo con un estilo flexible para colocarlos donde desee.