7/7/2019 Instalación y uso de Vue Router en Vue.js 2 – Styde.

net

MENU 

Instalación y uso de Vue Router en Vue.js 2

 
 Curso: Curso de Vue 2

 Ver todas las lecciones

 Duilio Palacios  09/08/2017

 JavaScript, Videotutorial, Vue.js  2 Comentarios

Crear una aplicación de una sola página o SPA (por sus siglas en inglés “Single
Page Application”) es muy sencillo con Vue.js.

Esto es debido a que con Vue.js nosotros podemos “componer” nuestra

aplicación de pequeños componentes independientes como hemos aprendido
hasta ahora y también contamos con un paquete llamado vue-router que nos
permite atar o enlazar una o más URLs a uno o más componentes específicos,
indicarle a Vue dónde queremos mostrar las secciones y por supuesto también
nos ayuda a generar los enlaces de las diferentes secciones.

Es por ello que a partir de ahora crearemos componentes con la intención de que
estos representen secciones o sub-secciones dentro de nuestra aplicación y
vamos a instalar y a utilizar vue-router para enlazar estos componentes a
diferentes URLs. Vamos a comenzar con un ejemplo sencillo en el siguiente video:

https://styde.net/instalacion-y-uso-de-vue-router-en-vue-js-2/ 1/7
7/7/2019 Instalación y uso de Vue Router en Vue.js 2 – Styde.net

09:34

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos

para que sigas aprendiendo.

Tu correo electrónico

SUSCRÍBETE

Notas
Instalación de Vue Router

Instalar Vue Router con npm es muy sencillo, simplemente ejecutamos el

siguiente comando:

1 npm install vue-router

Luego es necesario incluirlo de la siguiente forma (esto lo haremos en nuestro

archivo main.js):

1 import Vue from 'vue'

2 import VueRouter from 'vue-router'

3  

4 Vue.use(VueRouter)

https://styde.net/instalacion-y-uso-de-vue-router-en-vue-js-2/ 2/7
7/7/2019 Instalación y uso de Vue Router en Vue.js 2 – Styde.net

Una vez hecho esto, ya podemos crear un nuevo objeto Vue Router y registrar
nuestro listado de rutas:

1 const router = new VueRouter({

2     routes: [

3         // rutas aqui

4     ]

5 })

Debemos incluir el objeto router dentro del objeto VM.

1 var vm = new Vue({

2     el: "#app",

3     router,

4     render: h => h(App)

5 })

Esto lo hacemos utilizando la sintaxis de ES6, que es equivalente a router:

router.

Las rutas se especifican en un array y cada ruta será un objeto con al menos las
siguientes propiedades:

path: indica a donde apunta la ruta, como por ejemplo /about-us

component: indica el componente asociado a la ruta, representado por un
objeto, como por ejemplo AboutUsPage.

1 import AboutUsPage from 'pages/AboutUs.vue'

2  

3 routes: [

4     {

5         path: 'about-us',

6         component: AboutUsPage

7     }

8 ]

 Nota que en este ejemplo estoy colocando el hipotético componente en un

subdirectorio llamado pages puesto que como te comenté en la lección

https://styde.net/instalacion-y-uso-de-vue-router-en-vue-js-2/ 3/7
7/7/2019 Instalación y uso de Vue Router en Vue.js 2 – Styde.net

anterior, no hay una única forma de ordenar tus componentes sino que
depende de tu aplicación.

Finalmente para poder visualizar el componente debes agregar la siguiente

etiqueta a tu vista principal:

1 <router-view></router-view>

Por otro lado escribir un menú básico es muy sencillo:

1 <router-link to="/">Inicio</router-link>

2 <router-link to="tasks">Tareas</router-link>

En la siguiente lección veremos cómo personalizarlo.

Únete a la discusión
Regístrate en Styde y obtén una invitación a nuestro Slack.

Aprende desarrollo web con Laravel, Vue.js y mucho más a partir de 12 USD al
mes: ver planes.

Publicado por: Duilio Palacios

Programador y profesor de PHP y Laravel. Creador de Styde.net.

https://twitter.com/sileence/

   

 Vue.Js

 Lección anterior
Organización de los componentes en Vue.js 2

Lección siguiente 
Personalizar el estilo del menú de Vue Router

https://styde.net/instalacion-y-uso-de-vue-router-en-vue-js-2/ 4/7
7/7/2019 Instalación y uso de Vue Router en Vue.js 2 – Styde.net

https://styde.net/instalacion-y-uso-de-vue-router-en-vue-js-2/ 5/7
7/7/2019 Instalación y uso de Vue Router en Vue.js 2 – Styde.net

2 Comentarios Styde.net 
1 Acceder

 Recomendar 1 t Tweet f Compartir

Ordenar por los más nuevos

Únete a la conversación...

INICIAR SESIÓN CON

O REGISTRARSE CON DISQUS ?

Nombre

Must4nk • hace 2 años • edited

y cual es la diferencia ha usar esto, en lugar de vue-router?

computed: {
ViewComponent () {
const matchingView = routes[this.currentRoute]
return matchingView
? require('./pages/' + matchingView + '.vue')
: require('./pages/404.vue')
}
},
render (h) {
return h(this.ViewComponent)
}
})
△ ▽ • Responder • Compartir ›

Tiger • hace 2 años

Esta leccion me ha gustado mucho, sera que vengo de angularjs,
pero sin el router no me imaginaria ninguna aplicacion limpia y
profesional con vuejs
△ ▽ • Responder • Compartir ›

TAMBIÉN EN STYDE.NET

Genera reportes de avances y Notificaciones con idiomas

documentación con PHPUnit dinámicos en Laravel
1 comentario • hace 3 meses 7 comentarios • hace 6 meses
Jonathan Zarate — Dude esto es Andrés GS — Acabo de imaginar
Avatargenial. Yo he utilizado php code Avataruna solución, ya que por más
coverage tambien es muy util. que busqué, todo es cambiar el

Exportar archivos en formato Podcast #14: Consejos

Excel con Laravel Excel 3.x inusuales para programar
2 comentarios • hace 2 meses 4 comentarios • hace 5 meses
jhorvis sanchez — Ya detecte el Charlie Seoane — De nuevo un

https://styde.net/instalacion-y-uso-de-vue-router-en-vue-js-2/ 6/7
7/7/2019 Instalación y uso de Vue Router en Vue.js 2 – Styde.net

Suscríbete a nuestro
boletín
Te enviaremos publicaciones con
consejos útiles y múltiples recursos
para que sigas aprendiendo.

Tu correo electrónico

SUSCRÍBETE

     

En Styde nos dedicamos a enseñarte tecnologías actuales de desarrollo web para ayudarte
a crear tus proyectos de una forma más eficiente.

Ver Planes • Series y cursos • Ver últimas lecciones

Contacto • Términos de uso • Privacidad

© 2019 Derechos Reservados - Styde Limited

https://styde.net/instalacion-y-uso-de-vue-router-en-vue-js-2/ 7/7