Navegación con rutas en Vuejs

Este es el segundo tutorial de la serie Fundamentos puros y duros de Vuejs donde aprenderemos a utilizar rutas para navegar entre las vistas de nuestro proyecto Vue. Si tienes experiencia en el desarrollo web, está de más recordar la importancia del manejo de rutas en un proyecto web ya que gracias a ellas sucede la magia de un SPA (Single page application), una página web con muchas vistas que no necesita recargarse al cambiar de vistas. Así que te animo a terminar este tutorial donde al fin aprenderá a hacer un Single Page Application (SPA) en toda su regla.

Índice

  1. Instalando y usando Router
  2. Rutas con parámetros
  3. Utilizando el click para ir a una ruta
  4. Tu turno
  5. El código

1. Instalando y usando Router

Para crear un proyecto usando rutas debemos utilizar la herramienta Router que podemos instalar desde el CLI de Vue. Así que al momento de escoger las herramientas que tendrá nuestro proyecto también debemos seleccionar Router y en la siguiente pantalla de configuración del CLI escogeremos usar el History mode, a groso modo, esto nos permitirá cambiar de ruta sin necesidad de que la página recargue cada vez que lo haga.

Si utilizamos la terminal para crear nuestro proyecto Si utilizamos Vue ui para crear nuestro proyecto

Y si es que ya tienes un proyecto pero este no tiene instalado vue router lo único que debes hacer es utilizar el siguiente comando para instalarlo.

vue add router

Utilizar esa configuración o el comando que mostramos en la linea anterior creará una carpeta llamada router en el cual se encontrará el archivo index.js donde declararemos las rutas que queremos en nuestro proyecto. También agregará el código necesario en el archivo main.js para que las rutas puedan funcionar correctamente. Antes de continuar expliquemos un poco el código que hay en el archivo router/index.js.

// 💬 Importamos Vue
import Vue from "vue";
// 💬 Importamos la librería de router
import VueRouter from "vue-router";
// 💬 Importamos la primera vista desde la carpeta views
import Home from "../views/Home.vue";

// 💬 Le indicamos a Vue que utilice VueRouter
Vue.use(VueRouter);

// 💬 Definimos las rutas, en este ejemplo solo tenemos dos rutas Home y About
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  // 💬 Esta segunda ruta que tenemos como ejemplo importa su componente de manera directa
  // para esto utiliza un arrow function y usa el método import()
  {
    path: "/about",
    name: "About",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/About.vue"),
    // Este es solo otra forma de importar las rutas en nuestro proyecto
  },
];

// 💬 Aquí instanciamos VueRouter utilizando las rutas que definimos anteriormente en el objeto routes
// Recuerda que si la propiedad tiene el mismo nombre que su valor ( routes: routes )
// podemos abreviar colocando simplemente routes
const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  // esto es igual que routes : routes
  routes,
});

// 💬 Exponemos la instancia de VueRouter que creamos
export default router;
Es interezante resaltar que para que un View sea aceptado por una ruta no es necesario que este tenga la etiqueta script dentro del archivo vue. Es suficiente con tener la etiqueta template en su interior, como en el siguiente ejemplo. 
<template>
  <div class="home">
    <h2>Hola mundo</h2>
  </div>
</template>

Otro punto importante al trabajar con rutas es el lugar donde nuestras vistas se renderizarán. Para este objetivo vue nos proporciona una etiqueta especial llamada <router-view/>. Así que, esta etiqueta debe estar ubicada en el lugar donde queremos que se rendericen las vistas. Por otro lado, para crear los botones del menú de navegación entre rutas también tenemos una etiqueta especial llamada <router-link> en cuyo atributo to debemos colocar la ruta de nuestro View.

Un buen uso de estas dos etiquetas sería crear un menú de navegación y en la parte inferior colocar la etiqueta donde se renderizará cada vista al cambiar de rutas mediante el menú de navegación. Veamos el siguiente ejemplo.

<div>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </div>
  <router-view />
</div>

Vue también nos proporciona una forma de cambiar el estilo a estas etiquetas cuando la ruta a la que apuntan están activas. El selector CSS que nos brinda Vue es a.router-link-exact-active que para que funcione correctamente se debe colocar dentro de alguna etiqueta, generalmente div, que tenga un id. Como en el siguiente ejemplo dondo el id que contiene a las etiquetas <router-link> es #nav.

#nav a.router-link-exact-active {
  color: #42b983;
}

Listo!! ya somos capaces de crear rutas para navegar entre las vistas de nuestro proyecto.

2. Rutas con parámetros

Las rutas con parámetros también son muy usadas y se usan para enviar información hacia alguna ruta especifica de tal manera que ese parámetros se recupere en la vista y podamos realizar alguna acción como buscar información con dicho parámetro.

Para crear este tipo de rutas en router/index.js nuestra nueva ruta debe tener la siguiente forma. Donde id es el nombre del parámetro que se enviará a esa vista.

{
  path: '/foto/:id',
  name: 'fotos',
  component: Fotos
}

Ahora para obtener el parámetro que fue enviado por la ruta solo debemos usamos el siguiente código dentro de nuestra vista.

<h1>Id: {{$route.params.id}}</h1>

Ya sabemos como definir nuestras rutas con parámetros y también como obtener el parámetro que enviamos. Ahora la pregunta que nos queda es ¿Cómo accionar esa ruta y enviar parámetros por ahí? 🤔.

Para esto tenemos dos casos. El primer caso es enviar parámetros estáticos. Como en el siguiente ejemplo, donde abrimos la ruta services y enviando el parámetro 5.

<router-link to="/service/5">Click me</router-link>

Esto es poco útil ya que si tenemos una ruta con parámetros lo adecuado sería enviar por su parámetro alguna variable que tengamos almacenada o que se genera dinámicamente.

El segundo caso es justamente eso, colocar variables al parámetro que deseamos enviar. Para esto debemos usar :to y {} para poder utilizar variables en su interior. Sin embargo, este parámetro debe ser enviado como en el siguiente ejemplo. Donde name es el nombre de la ruta y params es un objeto que contiene los parámetros que se van a enviar.

<router-link
  :to="{name: 'service', params: {id: codigo}}"
  class="btn btn-block bg-warning"
>
  Go to {{codigo}}
</router-link>

3. Utilizando el click para ir a una ruta

Para dirigirnos a una ruta especifica no solo tenemos a la etiqueta router-link también podemos hacerlo desde un botón o cualquier otra etiqueta gracias al evento @click. Para esto primero debemos crear el método que se ejecutará al hacer click. Dentro de este método utilizaremos this.$router.push() para dirigirnos hacia alguna ruta.

<script>
export default {
    name: 'Service',
    methods: {
        // 💬 Este esl el método que se ejecutará al click
        home(){
            // 💬 En este caso nos dirigimos a la ruta raiz
            this.$router.push('/')
        }
    }
};
</script>

Además vue también nos proporciona una forma de ir hacia atrás o hacia adelante en el tiempo de navegación, como los botones de atrás y adelante del navegador. Para esto solo usamos los métodos $router.go(-1) y $router.go(1) para ir hacia atrás y hacia adelante respectivamente.

<script>
export default {
    name: 'Service',
    methods: {
        // 💬 Este método nos llevará a la página anterior
        back(){
            this.$router.go(-1)
        },
    }
};
</script>

4. Utilizando props para tomar los parámetros

Usar $route.params dentro de una vista, cada vez que queramos obtener un parámetro de la ruta, limita mucho la capacidad que esta vista del proyecto tiene. Para evitar eso, y tener más control sobre ese parámetro, podemos utilizar un prop para capturar el parámetro de la ruta. Para esto únicamente tendremos que habilitar los props desde donde creamos nuestras rutas.

export default new Router({
  routes: [
    {
      path: "/user/:username",
      name: "user",
      component: User,
      props: true,
    },
  ],
});

Y dentro de nuestra vista obtenemos esos parámetros de la siguiente forma.

<template>
  <div class="user">
    <h1>{{ username }}</h1>
  </div>
</template>

<script>
  export default {
    props: ["username"],
  };
</script>

5. Definir una vista para rutas no encontradas

En vuejs también podemos definir un vista a mostrar cada vez que no se encuentra una determinada ruta. Para esto solo debemos definir la siguiente ruta junto con la vista que queremos mostrar en estos casos.

const router = new VueRouter({
  mode: "history",
  routes: [...{ path: "*", component: NotFoundComponent }],
});

6. Tu turno

Ahora que sabes como funcionan las rutas te animo a crear un proyecto SPA en Vuejs que utilice rutas para navegar entre las vista. Puedes tomar de referencia el siguiente ejemplo que utiliza Bootstrap para un mejor aspecto visual, pero utiliza solo lo que aprendimos aquí.

Cuando quieras puedes ver el código del proyecto terminado. Pero ándale inténtalo tu mismo!!

7. El código

El código del proyecto está en el siguiente repositorio github.com/andygeek/vue-routes-app