Guía para el enrutador Vue

En esta guía, aprenda qué es el enrutamiento, cómo puede instalar `vue-router` en proyectos nuevos y existentes, cómo realizar la carga diferida, navegar entre rutas, realizar enrutamiento dinámico, acceder a los parámetros de la ruta y realizar la navegación programática en Vue y JavaScript.

Introducción

Al desarrollar aplicaciones web con Vue.js, a menos que esté creando una aplicación de una sola página (SPA), querrá conectar varias páginas a una página de destino para permitir que los usuarios naveguen por ellas. Esto se conoce como enrutamiento.

El enrutamiento es el proceso por el cual un usuario navega a diferentes páginas en un sitio web. Vue.js es un marco de JavaScript que se utiliza para crear aplicaciones de una sola página, lo que significa que esta aplicación solo se carga una vez desde el servidor al navegador, y el navegador no necesita recargarse cuando se enruta; en cambio, simplemente solicita estas páginas y se cargan.

En esta guía, aprenderemos cómo enrutar con Vue.js y profundizaremos en los diversos tipos de enrutamiento que se pueden hacer y cómo se pueden hacer.

Comenzando

El enrutamiento en Vue.js se realiza con Vue Router, que funciona junto con la biblioteca principal de Vue para permitirnos configurar un sistema de enrutamiento. Nos gustaría usar vue-router en dos escenarios en nuestro proyecto. O queremos usar el enrutador en un proyecto existente o agregarlo mientras creamos un nuevo proyecto.

Configurar el enrutador Vue en un proyecto existente

La integración de vue-router en un proyecto existente puede ser técnica, y repasaremos estos detalles ahora. El primer paso sería instalar el paquete del enrutador vue usando el siguiente comando:

1
! npm install [correo electrónico protegido]

Una vez instalado, navegue a la carpeta src y cree una carpeta llamada router, seguida de un archivo llamado index.js en la carpeta router, que servirá como nuestro archivo de configuración del enrutador. Nuestro directorio src ahora se verá así:

vue router installation

En el archivo index.js, asegurémonos de pegar el siguiente código, que es el código de configuración del enrutador:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
import { createRouter, createWebHashHistory } from 'vue-router'
import HomePage from '../views/HomePage.vue'

const routes = [
   {
      path: '/',
      name: 'home',
      component: HomePage
   },
]

const router = createRouter({
   history: createWebHashHistory(),
   routes
})
export default router

Tenemos una matriz de rutas que contiene un solo objeto, que podría ser varios objetos donde cada objeto representa una sola ruta. Por el momento, solo creamos el que redirigiría al componente de la página de inicio.

Cada uno de estos objetos de rutas se compone normalmente de la ruta, que es la ruta URL relativa a la raíz del sitio, el nombre, que sirve como identificador, y el componente, que importamos en la parte superior de la página.

Aparte de la matriz de rutas, configuramos la instancia del enrutador en la parte inferior creando una función createRouter() y pasando los valores clave del historial y la matriz rutas, y luego exportamos la instancia del enrutador para uso dentro de nuestra aplicación.

Para usar esta configuración de enrutador dentro de nuestra aplicación, abra el archivo main.js en la carpeta src, importar enrutador desde "./router" y luego agregue .use(router) entre createApp(App ) y .mount('#app') tal como se muestra a continuación:

1
2
3
import router from './router'

createApp(App).use(router).mount('#app')

Este vue-router se configuró globalmente dentro de nuestra aplicación, y el siguiente paso es usarlo dentro de nuestra aplicación. Esto se logra fácilmente al incluir <router-view /> dentro de la etiqueta de plantilla App.js, que representa solo la ruta coincidente:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<!--App.vue -->
<template>
<!-- Any code placed here is going to be fixed -->
<!-- This will only show the page that matches the selected route -->
   <router-view /> 
<!-- Any code placed here is going to be fixed -->
</template>

<script>
   export default {
      name: 'App',
   }
</script>
Configuración de rutas en Vue.js

Las rutas generalmente se crean en la matriz de rutas del archivo router/index.js, y estas rutas se conectan a los componentes. Es una buena práctica crear una carpeta de vistas donde se almacenarán todas las vistas de página. Por ejemplo:

setting up routes in vue

En este punto, ahora sabemos cómo configurar rutas manualmente.

{.icon aria-hidden=“true”}

Nota: Todo esto se hará por nosotros si usamos vue-cli para instalar vue-router al crear nuestro proyecto.

Instale el enrutador Vue con Vue CLI

Si estamos a punto de crear un nuevo proyecto y creemos que usaremos vue-router, es más fácil hacerlo mientras creamos el proyecto.

Todo lo que tenemos que hacer es usar Vue CLI para instalar la versión más reciente de vue-router mientras seleccionamos manualmente las funciones en el proceso de creación de nuestro proyecto:

vue cli setup of vue router

Read and learn more about creating Vue.js project via our Guía de la CLI de Vue!

Rutas de carga diferida con Vue Router

A medida que nuestra aplicación crece en tamaño, el tamaño del paquete crece, lo que hace que nuestro sitio tarde más en cargarse. Podemos usar vue-router para implementar la carga diferida para evitar cargar algunas rutas específicas hasta que el usuario las solicite específicamente.

Esto generalmente se logra en el archivo de configuración del enrutador eliminando la declaración de “importación” en la parte superior y reemplazándola con una declaración de importación dinámica en la opción de componente de nuestra ruta:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
import { createRouter, createWebHashHistory } from 'vue-router';
const routes = [
   {
      path: '/',
      name: 'home',
      component: () =>
         import(/* webpackChunkName: "home" */ '../views/HomePage.vue'),
   },
   {
      path: '/about',
      name: 'about',
      component: () =>
         import(/* webpackChunkName: "about" */ '../views/AboutPage.vue'),
   },
];
const router = createRouter({
   history: createWebHashHistory(),
   routes,
});
export default router;

Hasta ahora, hemos podido crear rutas, pero ¿cómo navegamos dentro de nuestra aplicación? Usamos la etiqueta <router-link> en lugar del elemento <a> en HTML para manejar el enrutamiento.

Por ejemplo, si queremos crear una barra de navegación en la parte superior de nuestra aplicación, podemos hacerlo en el archivo App.js arriba de la etiqueta <router-view/> para que se muestre en todas las rutas:

1
2
3
4
<nav>
   <router-link to="/">Home</router-link> |
   <router-link to="/about">About</router-link>
</nav>

El enlace del enrutador acepta el atributo to='path' que lleva al usuario a la ruta del componente como se configuró al configurar la ruta. Esto funciona como el atributo href='path``' en HTML.

Uso de rutas con nombre

El uso de rutas con nombre nos permite pasar la clave nombre que tiene acceso a la propiedad nombre que configuramos al configurar las rutas en lugar de usar la ruta vinculando los datos de esta manera:

1
<router-link :to="{ name: 'About' }">About</router-link>

Una ventaja de usar este método es que, en caso de que decidamos cambiar la ruta de la ruta para nuestras aplicaciones grandes, no necesitamos comenzar a cambiar la ruta de todos los enlaces, lo que podría ser engorroso.

Enrutamiento dinámico {#enrutamiento dinámico}

Pueden surgir situaciones que requieran el uso de enrutamiento dinámico para evitar la repetición innecesaria de páginas. Por ejemplo, supongamos que tenemos una lista de frutas y queremos que un usuario pueda hacer clic en una fruta específica y solo los detalles sobre esa fruta se muestran en una página de detalles de la fruta. En este caso, usamos enrutamiento dinámico.

Tendríamos dos páginas: una para mostrar las frutas en una lista y otra para mostrar los detalles de cada fruta, que es una página de "modelo" que se completará con los detalles de la fruta. Crearemos las páginas en la carpeta Vue y luego agregaremos las rutas a la matriz routes:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import FruitsPage from '../views/FruitsPage.vue';
import FruitDetails from '../views/FruitDetails.vue';

const routes = [
   {
      path: '/fruits',
      name: 'Fruits',
      component: FruitsPage,
   },
   {
      path: '/fruits/:id',
      name: 'FruitDetails',
      component: FruitDetails,
   },
];

Notaremos que para la página FruitDetails, agregamos una propiedad id dinámica para que obtenga el parámetro id y lo use para consultar los datos particulares que se muestran en esa página usando $route.params en nuestra plantilla , dinamizando así la ruta.

En FruitsPage, supongamos que tenemos una serie de frutas que ingresamos en nuestra aplicación, podemos envolver cada fruta con un enlace junto con los parámetros de esta manera:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!-- FruitsPage.vue -->

<template>
   <h1>Fruits page</h1>
   <div :key="fruit.id" v-for="fruit in fruits">
      // dynamic linking by attaching the id as params
      <router-link :to="{ name: 'FruitDetails', params: { id: fruit.id } }">
         <h3>{{ fruit.name }}</h3>
      </router-link>
   </div>
</template>

<script>
   export default {
      data() {
         return {
            fruits: [
               {
                  id: 1,
                  name: 'Apple',
                  description:
                     "Apples are an incredibly nutritious fruit.",
               },
               {
                  id: 2,
                  name: 'Mango',
                  description:
                     'A mango is an edible stone fruit produced by the tropical.',
               },
               {
                  id: 3,
                  name: 'Banana',
                  description:
                     'A banana is an elongated, edible fruit of the genus Musa.',
               },
            ],
         };
      },
   };
</script>

En este punto, cuando un usuario hace clic en cada fruta, lo llevará a la página FruitDetails donde podemos acceder al parámetro id y usarlo para identificar los detalles de qué fruta deben mostrarse en la página FruitDetails.

Acceda a los parámetros de ruta

Hasta ahora hemos visto cómo pasar dinámicamente los parámetros a una página en particular, ahora veamos cómo podemos acceder a ese parámetro en nuestra página FruitDetails. Hay dos formas de acceder a los parámetros en Vue: a través de $route.params o haciendo uso de accesorios:

Usando $route.params

Se puede acceder directamente a los parámetros a través de $route.params:

1
2
3
4
<template>
   <h1>Fruit Details</h1>
   <p>This is fruit with the id of {{ $route.params.id }}</p>
</template>

O podemos acceder a él dentro de nuestro método data() usando this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<template>
   <h1>Fruit Details</h1>
   <p>This is fruit with the id of {{ id }}</p>
</template>

<script>
   export default {
      data() {
         return {
            id: this.$route.params.id,
         };
      },
   };
</script>
Usar Vue Props

Otro método sencillo para acceder a los datos de forma dinámica a través de rutas es usar props. Primero tenemos que establecer props en true en el objeto de configuración de rutas:

1
2
3
4
5
6
{
   path: '/fruits/:id',
   name: 'FruitDetails',
   component: FruitDetails,
   props: true,
},

De esta manera, todo lo que tenemos que hacer a continuación es agregar la opción props a la etiqueta script y luego hacer uso de los accesorios dentro de nuestra etiqueta template:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<template>
   <h1>Fruit Details</h1>
   <p>This is fruit with the id of {{ id }}</p>
</template>

<script>
   export default {
      props: ['id'],
   };
</script>

Errores 404 - Ruta no encontrada

En el caso de que un usuario navegue a una ruta inexistente, Vue cargará la página pero sin ningún componente, produciendo una página vacía. En este caso, lo mejor que puede hacer es mostrar una página 404 con quizás un botón que los dirija a la página de inicio o donde creamos que les gustaría ir.

Esto se maneja fácilmente creando un componente para nuestra página 404 y luego agregando una ruta 404 a la matriz de rutas del archivo de configuración de nuestro enrutador, pero esta vez usaremos una expresión regular para capturar todas las rutas que no se han declarado previamente:

1
2
3
4
5
{
   path: '/:catchAll(.*)',
   name: 'ErrorPage',
   component: ErrorPage,
}

:catchAll es el segmento dinámico que recibe una expresión regular de (.*) en la que Vue Router usa para verificar si la ruta a la que navega el usuario está definida en el archivo de configuración de nuestro enrutador. Si tales rutas no existen, el usuario es dirigido al componente, que en nuestro caso es el componente ErrorPage:

1
2
3
4
5
<template>
   <h2>404 Page</h2>
   <p>This is a 404 page</p>
   <p>Visit home page <router-link to="/">here</router-link></p>
</template>

Redirecciones

En una situación en la que queremos que los usuarios sean redirigidos cuando visitan una ruta específica, por ejemplo, si teníamos una ruta anterior que ya no usamos, queremos que los usuarios sean redirigidos a la nueva cuando visiten esa ruta. Esto se logra fácilmente agregando un nuevo objeto a nuestra matriz de configuración de rutas, con un campo de “redireccionamiento”:

1
2
3
4
5
6
7
8
9
{
   path: '/fruits',
   name: 'Fruits',
   component: FruitsPage,
},
{
   path: '/all-frults',
   redirect: '/fruits',
},

Todo lo que hace el código anterior es que si un usuario visita la ruta /todas las frutas, lo redirigirá a la ruta /frutas.

Navegación programática

Hasta ahora, hemos aprendido mucho sobre el enrutamiento, pero hay algo más que querrá saber: cómo realizar la navegación programática. Definimos la navegación programática como una situación en la que se redirige/dirige a un usuario en función de una acción específica que se produce en una ruta, como una acción de inicio de sesión o registro, o al hacer clic en un botón específico, como "volver". botón.

Historial del enrutador

Podemos usar el historial del navegador para navegar fácilmente hacia atrás o hacia adelante, según nuestras preferencias. Si recuerda, tenemos una función createRouter() en el archivo de configuración del enrutador donde establecemos un valor de historial, lo que permite que el enrutador Vue realice un seguimiento del historial de nuestro enrutador a medida que enrutamos a través de la aplicación web.

Esto nos permite recorrer el historial del navegador, en función de un condicional como el clic de un botón:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<template>
   <h1>Fruit Details</h1>
   <p>This is fruit with the id of {{ id }}</p>
   <button @click="goBack">Go Back</button>
</template>

<script>
   export default {
      props: ['id'],
      methods:{
         goBack(){
            this.$router.go(-1)
         }
      }
   };
</script>

También podemos decidir avanzar usando el 1 en lugar de -1 y supongamos que queremos avanzar 2 pasos, podemos usar 2 o -2.

Empujar

push() normalmente se usa después de que ha ocurrido una acción y agrega una nueva entrada a la pila de historial. Por ejemplo, si un usuario inicia sesión con éxito, nos gustaría navegar a la página del panel mediante programación. Esto se logra al incluir el método push junto con el nombre de la ruta:

1
this.$router.push({ name: 'Dashboard' });

{.icon aria-hidden=“true”}

Nota: Debemos asegurarnos de que la ruta esté declarada en el archivo de configuración de nuestro enrutador, de lo contrario no funcionará y nos redirigirá a la página 404.

Conclusión

El enrutamiento es una de las funciones principales de Vue. A menos que esté creando una aplicación de página única (SPA), querrá conectar varias páginas a una página de destino para permitir que los usuarios naveguen por ellas.

En esta guía, hemos analizado qué es el enrutamiento, cómo puede instalar vue-router en proyectos nuevos y existentes, cómo realizar la carga diferida, navegar entre rutas, realizar enrutamiento dinámico, acceder a parámetros de ruta y realizar navegación programática. ca.