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

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:

Notas

Instalación de Vue Router

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

npm install vue-router

Luego es necesario incluirlo de la siguiente forma (esto lo haremos en nuestro archivo main.js):

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

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

const router = new VueRouter({
    routes: [
        // rutas aqui
    ]
})

Debemos incluir el objeto router dentro del objeto VM.

var vm = new Vue({
    el: "#app",
    router,
    render: h => h(App)
})

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.

import AboutUsPage from 'pages/AboutUs.vue'

routes: [
    {
        path: 'about-us',
        component: AboutUsPage
    }
]

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 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:

<router-view></router-view>

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

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

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

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.

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