Estoy usando Vue.js y vue-router, estoy tratando de navegar en un evento de clic.

De acuerdo con vue-router documentación debo usar la API router.push(name) función.

La cuestión es que el enrutador se inicializa en el componente raíz App y quiero navegar desde uno de los elementos secundarios del componente App.

¿Hay alguna manera de obtener la instancia del enrutador de this.$root o algo similar?

2
Shikloshi 14 ene. 2017 a las 13:07

3 respuestas

La mejor respuesta

Como se indica en la documentación de vue-router, cada componente se inyecta con objetos $router y $route, haciéndolos accesibles a través de this.$router y this.$route dentro del componente.

Si desea navegar desde el código de JavaScript de su componente, solo tiene que hacer lo siguiente:

this.$router.push({path: 'thepath'});

Si desea navegar desde su plantilla, puede usar:

<router-link :to="{path: 'thepath'}">The link</router-link>

Hay ejemplos de uso en el repositorio vue-router.

4
jeerbl 2 mar. 2018 a las 16:48

Sí, hay una manera muy simple: se se inyecta automáticamente en todos los componentes secundarios como this.$router si lo configuró según las instrucciones en guía oficial).

3
mzgajner 14 ene. 2017 a las 20:45

Intente esto si está utilizando Vue.js 2 (editado de @jeerbl answer)

<router-link :to="{path: 'thepath'}">The link</router-link>
0
yann_yinn 18 abr. 2018 a las 12:16