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/cliO
yarn global add @vue/cliRecuerda que puedes usar Windows, Linux o Mac ya que es multiplataforma.
Ahora, felizmente creamos un nuevo proyecto en Vue 3:
vue create my-vue-routerselecciona Vue 3, la preview y con esto tendremos nuestro proyecto básico y limpio en VUE 3 en poco tiempo:
Vue Router basico
Instalar Vue Router
Sobre la carpeta de nuestro proyecto que creamos anteriormente, ejecutamos:
npm i vue-router@nextCreando 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 routerPero 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.jsAquí 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:
- Ruta: la ruta URL donde se puede encontrar esta ruta.
- Nombre: un nombre opcional para usar cuando nos vinculamos a esta ruta.
- Componente: qué componente cargar cuando se llama a esta ruta.
- 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.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter