Crear ruteo básico en Vue 3 con Vue Router

- Andrés Cruz

In english
Crear ruteo básico en Vue 3 con Vue Router

Vamos a aprender a hacer un ruteo simple en Vue 3, para esto vamos a emplear el plugin de Vue Router que es excelente porque es desarrollado y mantenido por la misma gente de Vue, por lo tanto la integración es óptima.

Sobre el ruteo en Vue

La navegación es un tema fundamental para cualquier tipo de desarrollo de aplicaciones que estemos llevando a cabo, y en Vue o cualquier otro framework JavaScript del lado del cliente no puede ser la excepción. 

La navegación mediante rutas nos permite vincular distintas páginas

Páginas basadas en componentes, por lo tanto, podemos escalar la aplicación fácilmente con nuevas páginas y/o componentes.

Los componentes los puedes ver como si fueran una micro app que realiza una función en particular, un listado, un formulario, una funcionalidad, etc, que a su vez, pueden dividir en componentes que se encuentren en otros componentes, pero ya esto es otro tema.

Crear una app en Vue CLI

Como siempre, vamos a partir de la creación de una nueva aplicación en Vue, para eso vamos a usar la línea de comandos que nos ofrece Vue conocido como CLI, vamos a instalarla de manera global a nuestro OS:

npm install -g @vue/cli

O

yarn global add @vue/cli

Recuerda que puedes usar Windows, Linux o Mac ya que es multiplataforma.

Ahora, felizmente creamos un nuevo proyecto en Vue 3:

vue create my-vue-router

selecciona Vue 3, la preview y con esto tendremos nuestro proyecto básico y limpio en VUE 3 en poco tiempo:

 

Consola o Terminal creando un app en Vue Cli
Consola o Terminal creando un app en Vue Cli

 

Vue Router basico

Instalar Vue Router

Sobre la carpeta de nuestro proyecto que creamos anteriormente, ejecutamos:

npm i vue-router@next

Creando el archivo para las rutas

Como puede suponer, al igual que el funcionamiento clásico de cualquier plugin, la vinculación del plugin con Vue lo tienes que hacer en la instancia principal, aquí (en el archivo de la instancia principal) puedes colocar cualquier cantidad de código que en el caso de las rutas serían la definición de las ruta que lucen de la siguiente manera:

import { createRouter, createWebHistory }  from 'vue-router'
 
import Login from '../components/Login';
import App from '../components/App';
import Group from '../components/Group';
import Chat from '../components/Chat';
 
const routes = [
 {
   path: '/',
   name: 'App',
   component: App
 },
 {
   path: '/login',
   name: 'Login',
   component: Login
 },
 {
   path: '/group',
   name: 'Group',
   component: Group
 },
 {
   path: '/chat/:room',
   name: 'Chat',
   component: Chat
 }
]
 
const router = createRouter({
   // 4. createWebHashHistory
   history: createWebHistory(),
   routes, // short for `routes: routes`
 })
 
 export default router

Pero obviamente definiendo todas las rutas que vayas a emplear; así que, para mantener este archivo sencillo, vamos a hacer toda esta definición en un archivo a parte que luego vamos a exportar y definir directamente dentro de la instancia principal de Vue.

Crear y definir el archivo de router

Aunque puedes colocar cualquier nombre a este archivo y colocarlo en cualquier ubicación, a mi me gusta colócalos dentro de:

helpers/router.js

Aquí voy a suponer que tenemos algunos componentes ficticios, aunque son basados en mi curso de Electron en la cual estábamos construyendo una aplicación de Chat con Firebase y puedes obtener más información desde esta página en la sección de curso.

Explicación del código anterior

Aquí no hay mucho que decir, básicamente todo se auto explica, de igual manera:

  • La función llamada createRouter que viene formando parte del plugin de Router Vue nos permite definir las rutas, para esto tenemos que pasar un parámetro que vienen siendo las rutas, un array con las rutas, en las cuales cada elemento tiene que tener el path, que viene siendo la uri y el componente, el nombre es opcional y nos sirve cuando queremos crear un enlace de navegación (router-link) o la navegación de manera programática mediante el componente de router.
  • Por lo demás, a la función de createRouter le tenemos que definir mediante la opción de history el modo de composición de la URL:
  • history: createWebHistory(),

Debajo de esta matriz, notará que creamos el enrutador en sí, utilizando las rutas y también pasamos createWebHistory. Esto se usa para cambiar de usar hash al modo de historial dentro de su navegador, usando la API de historial de HTML5. La forma en que configuramos esto es un poco diferente a la que hicimos en Vue 2 en el mismo curso.

Es simplemente para indicar si queremos una URL limpia o una simulada con una almohadilla.

Definiendo el template base

En nuestro src/App.vue, que es el componente que se crea por defecto y se carga por defecto, colocamos el esqueleto de la app junto con el router-view que nos permite crear la web SPA; y donde se renderizan los componentes por los cuales nuestro usuario navega y que corresponden a las rutas definidas anteriormente:

<template>

 <div id="nav">

   <router-link to="/">App</router-link> |

   <router-link to="/login">Login</router-link> |

   <router-link to="/group">Group</router-link>

 </div>

 <router-view />

</template>

 

<script>

export default {

 name: "App",

 components: {},

};

</script>

Puedes ver cada uno de los componentes que empleamos aquí de manera demostrativa en el repositorio en github que te dejé anteriormente

Palabras claves:

  1. Ruta: la ruta URL donde se puede encontrar esta ruta.
  2. Nombre: un nombre opcional para usar cuando nos vinculamos a esta ruta.
  3. Componente: qué componente cargar cuando se llama a esta ruta.
  4. Usando <router-view> y <router-link>

Hay dos directivas que nuestra aplicación Vue nos da para usar en nuestra plantilla:

<router-view />: cuando se navega a una ruta en el navegador, aquí es donde se representa el componente, es decir, donde es renderizado el contenido cambiante de nuestra página de tipo SPA. Por ejemplo, en nuestro código, ir a / representará el componente Home donde listamos <router-view />.

<router-link>: esta es la directiva que usamos para crear enlaces entre nuestras diferentes páginas de componentes, en lugar de usar <a href>. 

¿Por qué Vue Router?

Vue es poderoso para crear aplicaciones de una sola página: páginas web altamente interactivas que NO se actualizan cuando cambia de una página a otra. Si su sitio web tiene varias páginas (o "vistas") y está utilizando Vue, es por eso que necesita Vue Router, ya que nos permite crear las famosas páginas de tipo SPA para hacer todo esto sin mucho problemas empleando uno de los frameworks web del lado del cliente más populares y sencillos del mercado.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.