Guía de redirecciones de enrutador Vue

En esta guía, aprenda cómo redirigir a un usuario en Vue mediante programación, condicionalmente, al presionar un botón, automáticamente, y cómo mantener varias URL que apuntan al mismo componente a través de alias.

Introducción

Al desarrollar aplicaciones web con Vue.js que tienen muchas páginas e incorporan muchas funciones, como inicio de sesión, autenticación, transporte, así como una buena cantidad de aplicaciones CRUD, necesitaremos implementar el enrutamiento en algún momento, lo que implica redirigir a un usuario de una página a otra, ya sea mediante programación o cuando acceden a una ruta a través de la URL.

En este artículo, aprenderemos los diversos medios de redirección y enrutamiento en Vue.js con ejemplos prácticos de código.

Requisito previo

El enrutamiento en Vue.js se logra mediante el uso del paquete vue-router, que nos permite realizar fácilmente el enrutamiento de una sola página dentro de nuestra aplicación Vue. Para implementar redirecciones de enrutador en Vue, primero debemos instalar este paquete en nuestro proyecto, lo cual podemos hacer ejecutando el siguiente comando en nuestra terminal:

1
$ npm install [correo electrónico protegido]

Redirigir con Vue

Todas las rutas en Vue.js están configuradas en el archivo de configuración del enrutador, que es un archivo dedicado para todos los tipos de enrutamiento en Vue. Este archivo generalmente se encuentra en /src/router/index.js.

Para usar una ruta, debemos declararla en el archivo de configuración del enrutador, después de lo cual podemos hacer referencia a ella en otras partes de la aplicación. El enrutamiento se puede realizar de varias maneras, y los diferentes escenarios pueden requerir diferentes redireccionamientos, pero comencemos con el tipo de redireccionamiento más básico antes de pasar a otros, como los redireccionamientos programáticos, condicionales y de error.

Cuando un usuario navega a la ruta /home, digamos que siempre debe redirigirlo a la ruta /, mostrando así la HomePage. Esto se puede hacer a través de redireccionamientos:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const routes = [
   {
      path: '/',
      name: 'Home',
      component: HomePage,
   },
   {
      path: '/home',
      redirect: '/',
   }
];

El énfasis principal está en el segundo objeto que toma las opciones ruta y redireccionar, cuando un usuario navega a la ruta establecida, automáticamente lo redirige a la ruta establecida en la opción redireccionar.

{.icon aria-hidden=“true”}

Nota: Notaremos que la redirección en realidad reemplaza el enlace, lo que significa que cuando navegamos a /home, la URL cambia a /, mostrando así el conjunto de componentes para la ruta /.

En una situación en la que no queremos que la URL cambie, pero queremos que muestre el conjunto de componentes para la ruta /, entonces podemos usar un Alias.

Alias

Un alias es una opción que podemos agregar un alias para una ruta existente. En efecto, podemos tener múltiples rutas que funcionen con un componente en particular, en lugar de redirigir a una sola ruta que lo maneje.

Por ejemplo, cuando establecemos un alias en /home y la ruta real se establece en / con un componente de HomePage, cuando un usuario navega a /home, aparecerá el componente HomePage, pero el La URL sigue siendo /home:

1
2
3
4
5
6
{
   path: '/',
   name: 'Home',
   component: HomePage,
   alias: '/home',
},

{.icon aria-hidden=“true”}

Nota: Un alias puede tomar una matriz de más de una ruta y estas rutas pueden incluir parámetros.

1
2
3
4
5
6
{
   path: '/',
   name: 'Home',
   component: HomePage,
   alias: ['/home', '/homepage'],
},

Ahora, /, /home y /homepage manejan el mismo componente HomePage.

Redirigir programáticamente

También podemos realizar redireccionamientos programáticos, como cuando se hace clic en un botón o se realiza una acción. Esto se maneja con el método push() del enrutador, que se puede usar en cualquier parte de nuestra aplicación. Cuando se hace clic en el botón en el ejemplo a continuación, lleva al usuario a la ruta especificada:

1
2
3
4
<template>
   <h2>Home Page</h2>
   <button @click="$router.push('/about')">Redirect Me</button>
</template>

Esto también se puede manejar dentro de nuestra etiqueta de script usando la palabra clave this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<template>
   <h2>Home Page</h2>
   <button @click="redirectMe()">Redirect Me</button>
</template>

<script>
   export default {
      methods: {
         redirectMe() {
            this.$router.push('/about');
         },
      },
   };
</script>

Es importante tener en cuenta que el argumento podría ser una ruta de cadena como la que usamos anteriormente o un objeto descriptor de ubicación que podría aceptar nombre, ruta, etc.:

1
2
3
4
5
6
7
8
// String path
$router.push('/about')

// Descriptor object with path
$router.push({ path: '/about' })

// Named route 
$router.push({ name: 'About' })

Sustitución de la URL actual

A medida que navegamos usando métodos programáticos, estamos presionando y agregando al historial de nuestro navegador tal como lo haría el usuario al hacer clic manualmente. Si queremos empujar sin crear una nueva entrada en el historial, querremos reemplazar la entrada:

1
2
3
router.push({ path: '/about', replace: true })
// This is equivalent to
router.replace({ path: '/about' })

Redirección condicional

Es posible que queramos redirigir a los usuarios cuando se completa un comando específico, como cuando queremos autenticar a un usuario, confirmar la compra de un producto, etc. Esto generalmente se logra mediante el uso de declaraciones condicionales, como:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<template>
   <h2>Home Page</h2>
   <button @click="checkUser()">Authenticate Me</button>
</template>

<script>
   export default {
      data(){
         return{
            isLoggedIn: true,
         }
      },
      methods: {
         checkUser() {
            if(this.isLoggedIn){
               this.$router.push('/dashboard');
            }else{
               this.$router.push('/login');
            }
         },
      },
   };
</script>

También podemos realizar esto sin tener que crear un método:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<template>
   <h2>Home Page</h2>
   <button @click="{ isLoggedIn ? $router.push('/dashboard') : $router.push('/login'); }">
      Authenticate Me
   </button>
</template>

<script>
   export default {
      data() {
         return {
            isLoggedIn: true,
         };
      },
   };
</script>

Redirigir a una página 404

Finalmente, sería beneficioso incluir cómo manejar los errores cuando un usuario navega a la ruta incorrecta. Cuando un usuario navega a una ruta que no está declarada en el archivo de configuración de nuestro enrutador, muestra un componente vacío, que normalmente no es el comportamiento deseado.

Esto se maneja fácilmente capturando todas las rutas excepto aquellas configuradas con una expresión regular y asignándolas a un componente de error:

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

Conclusión

En este artículo, aprendimos cómo redirigir en Vue y cómo manejar los redireccionamientos de varias maneras. eras.